>

안녕하세요 여러분, 도와주세요 :

반응 + 파이어베이스 + 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 를 표시합니다

상태를 업데이트하지 못했습니다 (업데이트를 보는 유일한 방법은 페이지를 새로 고침하는 것입니다)

제발 도와주세요.

감사합니다

  • 답변 # 1

    코드에서 디스패치 함수를 호출하는 것을 잊었다 고 생각합니다. 예를 들면 다음과 같습니다.     this.props.editPost (id, post);// 이것은 redux store의 데이터를 업데이트합니다. 그런 다음 redux store에서 업데이트 된 데이터를 가져올 수 있습니다.

  • 답변 # 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
        });
      }
    }
    
    

  • 답변 # 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 : ""
        };
      }
    
    

    피오트르 스라 구라 감사합니다

관련 자료

  • 이전 python - 명시 적으로 지정되지 않은 문자열을 두 줄 이상으로 나누는 방법은 무엇입니까?
  • 다음 rabbitmq 소비자 모니터링