0

我正在使用来自https://jsonplaceholder.typicode.com/users的 axios 进行一些简单的获取，并且我正在使用 redux 来存储应用程序的状态。从 url 上传我想在下拉列表中获取所有名称。但是从 2 天开始就给了我这个错误：

TypeError：无法读取未定义的属性“地图”。

如果您以前看过，现在我将在下面提供一些代码。

这是动作，我认为没关系。

export const getAuthors = () => {
 return (dispatch) => {
axios.get('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
    dispatch({
      type: GET_AUTHORS,
      payload: response.data
    })
  })
  .catch(e => console.log(e))
 }}

这是减速器，我认为这是错误：

export default (state = initialState, action) => {
console.log("ACTION", action.payload);
switch (action.type) {
    case GET_AUTHORS:
        return {...state, authors: action.payload}
    default:
        return state;
}
}

这是显示错误的函数组件：

const AddPostModal = ({authors, authorName}) => {
  return(
      <select
          value={authorName}
          onChange={handleChangeAuthor}
          {
             authors.map((author, index) => {
                return (
                   <option key={index}> {author.name} </option>
                )
             })
      </select>
  )
}
export default AddPostModal;

下面我们有类组件：

import { getAuthors} from '../../actions/PostActions';
class Post extends React.Component{
    constructor(props) {
    super(props);
    this.state = {
      authorName: ''
    }
   }
   render() {
     return(
       <AddPostModal
         authors={this.props.author}
         authorName={this.state.authorName}
       />
     )
   }
  }
   const mapStateToProps = (state) => {
     return {
       authors: state.authorName.authors
     };
   }

   const mapDispatchToProps = (dispatch) => (bindActionCreators({
     getAuthors: getAuthors,
   }, dispatch))

   export default connect(mapStateToProps, mapDispatchToProps)(Post);

如果有人有解决方案，请告诉我，因为你会拯救我的一天。非常感谢您提前。

4

3 回答 3

0

在您的Post组件this.props.author中可以null或undefined基于情况。所以我宁愿AddPostModal只在this.props.author不是null或者undefined因为this.props.author是需要的时候才打电话AddPostModal

在Post组件上：

const mapStateToProps = (state) => {
     return {
       authors: state.authorName.authors || []
     };
   }
于 2020-03-15T14:38:22.003 回答
0

首先，确保您的initialState.authorsis []。其次，确保您的state.authorsNameinmapStateToProps正确指向authorName减速器的状态。否则，它可能应该像authors: state.authors.

于 2020-03-15T14:42:30.240 回答
0

API 以异步方式返回结果，因此您可以先进行简单的null检查authors。从技术上讲.map()，只能在数组上调用，并且null会抛出您在解决方案中看到的错误。

尝试以下操作：

<select value={authorName}
        onChange={handleChangeAuthor}>
          {
             authors && authors.map((author, index) => {
                return <option key={index}> {author.name} </option>
          })
</select>

我希望这会有所帮助！

于 2020-03-15T14:29:25.107 回答