时间戳

首页 > 解决方案 > 更改道具时反应子组件不重新渲染

javascript - 更改道具时反应子组件不重新渲染

问题描述

我正在做一个简单的待办事项应用程序，我尝试根据单击的注释的id呈现EditComponent，以便我可以在编辑注释表单中填充现有详细信息。我将活动笔记 ID 存储在Parent's state中。首次渲染EditComponent时，它按预期工作。但是，当我使用setState更改id时，现有的渲染不会使用新的注释详细信息进行更新。这是在单击特定笔记的编辑按钮时执行的功能

  setEditState = id => {
    this.setState({id,isEdit:true})
  }

这是我的父渲染（）

render() {
    let form;
    if(this.state.isEdit){
      form = <EditComponent id={this.state.id} />
    }
    else{
      form = <AddComponent />
    }
    return (
      <div className="App">
        <ViewComponent notes={this.state.notes} setEditState={this.setEditState} deleteNote={this.deleteNote} />
        {form}
      </div>
    );
  }

这是我填充EditComponent状态的地方。

    async componentDidMount(){
        const note = await this.getNote(this.props.id)
        console.log(note.data.subject)
        this.setState({
            id:this.props.id,
            modifiedSubject: note.data.subject,
            modifiedNote: note.data.noteText
        })
    }

这是子渲染（）中编辑表单中的输入之一

<input className="form-control" type="text" onChange={this.handleSubject} value={this.state.modifiedSubject} />

我的预感：因为我使用的是componentDidMount() ，所以我没有一次又一次地更新它吗？如果是这样，当传递给孩子的道具发生变化时，是否有任何生命周期方法执行？

提前致谢

标签： javascriptreactjs

解决方案

你必须使用UNSAFE_componentWillReceiveProps() 它。

参考

推荐阅读