Question

我正在尝试在组件中显示文章列表，并且在“ articleList.js”组件上收到“无法读取未定义的属性'map'的未定义”错误。我的代码有什么问题？还有当我记录文章时，它是未定义的。

我的reducer中有以下代码：

 const initialState = {
  articles: [],
  loading: false,
  error: null
  };


export default (state=initialState, action) => {
switch (action.type) {
    case GET_ARTICLES:
      return {
         ...state,
         articles: action.payload,
         loading: false
     };

操作代码：

 export const getArticles =()=> dispatch =>{
 fetch('http://localhost:8000/api/articles/')
.then(handleErrors)
.then(res => dispatch(
    {
        type : GET_ARTICLES,
        payload: res.json
    }
))}

组件代码：

 componentDidMount() {
     this.props.getArticles();
 }

render() {
    const { articles } = this.props.article;

return (
  <div>
    <div>
      <div>
        {articles.map(({ id, header }) => (
          <div key={id} timeout={500} className="fade">
            <div>
              <button className="remove-btn" onClick={this.onDeleteClick.bind(this, id)} >Remove</button>
              {header}
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);
}
}

   const mapStateToProps = state => ({
        article: state.article
    });

   export default connect(
        mapStateToProps, { getArticles} )(ArticleList);

很抱歉，转储了大量代码，所有代码都与之相关，我认为错误在于未定义的initialState内，但我看不到我错过的定义

Answer 1

您似乎将自己与单数/复数变量的名称混淆了。您的操作将articles设置为减速器状态的复数形式：

return {
  ...state,
  articles: action.payload,

因此，当您mapStateToProps时：

 const mapStateToProps = state => ({
      article: state.article
  });

state.article将未定义，因为reducer从未将其设置为单数变量。另外，从您提供的摘录中，我仍然没有理由使用单数术语。

所以尝试像这样改变

  const { articles } = this.props.articles;

  const mapStateToProps = state => ({
    articles: state.articles
  });

Answer 2

好吧，我认为您只需要检查您的文章是否未定义，状态更新可能是异步的，因此在第一次调用render方法时，它是未定义的，只需执行类似

的操作

{articles ? {articles.map(({ id, header }) => (
      <div key={id} timeout={500} className="fade">
        <div>
          <button className="remove-btn" onClick={this.onDeleteClick.bind(this, id)} >Remove</button>
          {header}
        </div>
      </div>
    ))} : null }

无法读取未定义的属性'map'-react，redux

2 个答案: