Question

我正在更新帖子，然后单击更新时出现此错误

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

这是我的减速机，有效载荷是

// Assuming "?post=1234&action=edit"

var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true

console.log(urlParams.get('action')); // "edit"

console.log(urlParams.getAll('action')); // ["edit"]

console.log(urlParams.toString()); // "?post=1234&action=edit"

console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

这是我的post组件渲染

action.payload: {id: 1, title: "test", body: "update"}

case UPDATE_POST:

    const updatedItems = state.items.map(item => {
        if(item.id === action.payload.id){
            return { ...item, ...action.payload }
        }
        return item
    })
    return updatedItems

Answer 1

您正在使用state.items访问数组，这意味着数组是对象的一部分，键是项。因此，最后您需要返回一个带有更新项的对象，但是您将从reducer返回一个数组。

这样写：

case UPDATE_POST:

    const updatedItems = state.items.map(item => {
        if(item.id === action.payload.id){
            return { ...item, ...action.payload }
        }
        return item
    })

    return {...state, items: updatedItems }

Answer 2

首先在Props中检查数据是否到来，然后使用它。并使用渲染中的控制台对其进行调试，以检查数据是否到来。如果有数据，那应该可以。如果仍然遇到问题，请告诉我您的问题与此question

相似

this.props.posts ?
const postItems = this.props.posts.map(post => (
     <div key={post.id} className="row">
         <div className="container">
             <h3>{post.title}</h3>
              <p>{post.body}</p>
              <button
                  onClick={() =>this.editPost(post)}
                  className="btn btn-primary">
                  Edit
              </button>&nbsp;
              <button
                  onClick={() =>this.deletePost(post.id)}
                  className="btn btn-danger">
                  Delete
              </button>
          </div>
      </div>  
  ))
: null

TypeError：更新时无法读取未定义的属性'map'反应redux

2 个答案: