仅当我刷新页面时，componentWillReceiveProps 才会更新状态答案

【问题标题】：componentWillReceiveProps will update the state only if i refresh the page仅当我刷新页面时，componentWillReceiveProps 才会更新状态
【发布时间】：2019-02-09 15:47:58
【问题描述】：

大家好，请您帮我解决这个问题：

我正在使用 react + firebase + redux

类中的最后几行如下所示（编辑帖子页面）：

const mapStateToProps = (state, ownProps) => {
  const id = ownProps.match.params.id;
  const posts = state.firestore.data.posts;
  const post = posts ? posts[id] : null;
  return {
    post: post,
    auth: state.firebase.auth
  };
};

const mapDispatshToProps = (dispatch, ownProps) => {
  return {
    editPost: (id, post) => dispatch(editPost(id, post, ownProps.history))
  };
};

export default compose(
  connect(
    mapStateToProps,
    mapDispatshToProps
  ),
  firestoreConnect([{ collection: "posts" }])
)(CreatePost);

之后我使用 componentDidMount 来获取这样的帖子：

componentDidMount() {
    const post = this.props.post;
    console.log(post);

    this.setState({
      title: post ? post.title : "",
      content: post ? post.content : ""
    });
  }

我也使用过 componentWillReceiveProps ：

componentWillReceiveProps(nextProps) {
    const { post } = nextProps;
    console.log(post);
    this.setState({
      title: post.title,
      content: post.content
    });
  }

我的 ipnut 是这样的：

<input type="text" id="title" value={this.state.title} onChange={this.handleChange} />

控制台总是显示null

我没有成功更新状态（查看更新的唯一方法是刷新页面）

你能帮帮我吗，

谢谢

【问题讨论】：

你不应该使用componentWillReceiveProps，它从版本16开始被弃用，并且将在版本17中被删除。改用static getDerivedStateFromProps。
嘿Piotr，我试过static getDerivedStateFromProps，但这个函数是static，它不能访问this.state。我该怎么办？
getDerivedStateFromProps 有两个参数：props, state。如您所见，第一个是当前道具，第二个是当前状态。你应该在这个方法中返回新的状态，所以它看起来像这样：static getDerivedStateFromProps(props, state) { let newState = {...state}; newState.foo = props.foo; return newState; }

标签： reactjs firebase react-redux

【解决方案1】：

我认为您可能忘记在代码中调用调度函数。例如，像这样： this.props.editPost(id, post); // 这将更新你的 redux 存储的数据。然后你可以从你的 redux 存储中获取更新的数据。

【讨论】：

您好 J.Odrin，感谢您的回复。我不想在这里调用 editPost 函数，我只想先将数据从 firebase 获取到表单。就我而言，数据来自firebase，但不会实时更新。唯一的办法就是刷新页面
所以，我无法理解您，我认为从您的商店获取数据需要一些事件，您将如何定义事件以从您的商店获取数据？如果您没有在组件中定义任何事件，componentWillReceiveProps 函数将永远不会在不刷新的情况下触发。

【解决方案2】：

componentWillReceiveProps 已弃用，请使用componentDidUpdate：

componentDidUpdate(prevProps) {
  if(prevProps.post !== this.props.post) {
    const { post } = this.props;
    console.log(post);
    this.setState({
      title: post.title,
      content: post.content
    });
  }
}

【讨论】：

感谢 Mohammed Ramrami 的回复，我确实尝试了 componentDidUpdate 但它显示此错误Cannot read property 'title' of null 这意味着该帖子尚未更新。我已经像这样this.setState({title: post ? post.title : "", content: post ? post.content : "" }); 更改了 setState 但这也不起作用（超出了最大更新深度）

【解决方案3】：

问题已解决，谢谢大家：

解决方案：不要使用这个：

componentDidMount() {
    const post = this.props.post;
    console.log(post);

    this.setState({
    title: post ? post.title : "",
    content: post ? post.content : ""
  });
}

我已经像这样使用了static getDerivedStateFromProps

  static getDerivedStateFromProps(nextProps, state) {
    const { post } = nextProps;
    return {
      title: post ? post.title : "",
      content: post ? post.content : ""
    };
  }

谢谢皮奥特·斯拉古拉

【讨论】：