在React Redux中将发布请求发送到jsonplaceholder失败

Question

我制作了一个简单的React Redux应用程序，该应用程序从jsonplaceholder获取帖子列表，并且其中包含一种允许用户发送POST请求的表单。当我根据Redux DevTools扩展名发送发布请求时，它被成功添加并标记为发布号101。这是其快照

但问题是单击提交按钮3次后，它在屏幕上显示。

前两次单击既不显示标题也不显示其正文，但在第三次单击时开始显示。 这是Posts.jsx文件，这是我在发布请求后使用componentDidUpdate更新组件的方式。

class Posts extends Component {
    componentDidMount(){
        this.props.fetchPosts();
    }

    componentDidUpdate(nextProps) {
        if (nextProps.newPost) {
            this.props.posts.unshift(nextProps.newPost);
        }
    }
    
    renderPosts(){ // cutted for brevity  }

    render() {
        return (
            {this.renderPosts()}
        )
    }
}

const mapStateToProps = (state) => {
    return {
        posts: state.posts.items,
        newPost: state.posts.item,
    }
}


export default connect(mapStateToProps, { fetchPosts })(Posts);

Here is its GitHub link repository。 我得到的唯一错误是以下错误。

index.js:1 Warning: Each child in a list should have a unique "key" prop.

我认为这与呈现新帖子无关，但是我已经在遍历组件时指定了“键”。

在此职位请求过程中我做错了什么？谢谢。

Answer 1

您使用了错误的lifeCycle方法。为了获得nexProps，您必须使用componentWillReceiveProps而不是componentDidUpdate。

componentDidUpdate将为您提供先前的道具和先前的状态。

  componentWillReceiveProps(nextProps) {
    if (nextProps.newPost) {
      this.props.posts.unshift(nextProps.newPost);
    }
  }

上面的代码段应该起作用。

但是不建议使用此方法。 react引入了一种替代方法（这种方法）。称为getDerivedStateFromProps。问题是这是一个静态方法，您无法在此方法内部访问以前的道具（this.props）。

如果需要，您做错了一些事情，因为这是一种反模式。