componentWillReceiveProps обновит состояние, только если я обновлю страницу

Question

Привет всем, пожалуйста, помогите мне с этим:

я использую реагировать + 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 lookнапример:

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

консоль всегда отображает null

Мне не удалось обновить состояние (единственный способ увидеть это обновлениеобновление страницы)

не могли бы вы мне помочь,

спасибо

Answer 1

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
    });
  }
}

Answer 2

проблема была решена, спасибо всем:

решение: не использовать это:

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 : ""
    };
  }

спасибо Петр Шлагура

Answer 3

Я думаю, что вы можете забыть вызвать диспетчерскую функцию в своем коде.Например, вот так: this.props.editPost (id, post);// это обновит данные вашего магазина приставок.и затем вы можете получить обновленные данные из вашего магазина притока.