反应输入值在子组件中不起作用

Question

我有两个组件。子组件将在模态框中打开。模态框组件将包含添加和编辑用户。我已经为模式框输入传递了一些值，并在 getDerivedStateFormProps 生命周期挂钩中获取了该值。最初它将值填充到输入值。但在那之后，如果在文本框中输入任何内容，则状态不会更新。请看下面的详细信息

static getDerivedStateFromProps(props, state) {
    state.show = props.show;
    state.company = props.company;
    return state;
  }

onChange = async(e) => {
    this.setState({company: {...this.state.company, [e.target.name]: e.target.value}});
  }

但是状态没有更新。任何人都可以提供帮助来解决这个问题。提前致谢。

Answer 1

不要改变state 参数。

getDerivedStateFromProps 的正确用法是返回一个浅合并到组件现有state 中的对象。

static getDerivedStateFromProps(props) {
    const {show, company} = props;
    return {show, company};
}

此外，getDerivedStateFromProps 将由 React 在将您调用的状态应用到 this.setState 之后调用。这意味着对getDerivedStateFromProps 中company 的任何更改都会破坏this.setState 中对company 的更改。