代码之家 › 专栏 › 技术社区 › ABS zarzis

只有刷新页面时,ComponentWillReceiveProps才会更新状态

react-redux firebase reactjs

ABS zarzis · 技术社区 · 6 年前

大家好,你们能帮我一下吗?

我正在使用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

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

你能帮帮我吗?

谢谢您

3 回复 | 直到 6 年前

J.Odrin 6 年前

我认为您可能忘记了在代码中调用分派函数。例如,如下所示: this.props.editpost(id,post);//这将更新Redux存储区的数据。然后您可以从Redux存储中获取更新的数据。

Mohamed Ramrami 6 年前

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

ABS zarzis 6 年前

问题解决了,谢谢大家:

解决方案: 使用本产品的先例:

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

谢谢Piotr Szlagura

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

5 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

6 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

6 月前

noblerare · Vite错误-未定义导出(SSR)

6 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

6 月前