时间戳

首页 > 解决方案 > 在 React Redux 中向 jsonplaceholder 发送 post 请求失败

javascript - 在 React Redux 中向 jsonplaceholder 发送 post 请求失败

问题描述

我制作了一个简单的 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);

这是它的 GitHub 链接存储库。我得到的唯一错误是以下错误。

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

我不相信这与渲染新帖子有任何关系，但我已经在循环组件时指定了一个“键”。

在这个帖子请求的过程中我做错了什么？谢谢你。

标签： javascriptreactjsapihttp-postjsonplaceholder

解决方案

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

componentDidUpdate 会给你之前的 Props 和之前的 State。


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

上面的代码片段应该可以工作。

但这种方法已被弃用。react 引入了一种替代方法（一种）。这就是所谓的getDerivedStateFromProps。问题是它是一个静态方法，你不能在这个方法中访问以前的道具（this.props）。

如果你需要它，你做错了什么，因为它是一种反模式。

推荐阅读