Reactjs：警告：组件正在更改受控

Question

我正在编写一个 react crud 应用程序，我的 crud 运行良好，但它有一个控制台错误，下面是：Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: 我尝试了很多在stackoverflow上阅读太多东西，有人可以帮我吗？这是我的home.js文件：import React from "react"import Table from "./table"import Form from "./form"class Home extends React.Component {    constructor(props) {        super(props);        this.state = {            current: 'SAVE', // button name            employees: [{name: 'jhon', age: '23', email: 'a@a'}, {name: 'doe', age: '24', email: 'b@a'}],            currentEmp: {},            isFormVisible: false        };        this.onSubmit = this.onSubmit.bind(this);        this.onDelete = this.onDelete.bind(this);        this.setIndex = this.setIndex.bind(this);    }    onSubmit(name, age, email, index=null) {        if(!index && this.state.current == 'SAVE'){            this.setState({ employees: [...this.state.employees, { name: name, age: age, email: email }] });        }        else if(this.state.current == 'Update'){            var emp = this.state.employees;            emp[this.state.index].name = name;  //use index from state            emp[this.state.index].age = age;            emp[this.state.index].email = email;            this.setState({                currentEmp: {},                employees: emp,                current: 'SAVE'            });        }        else{            this.setState({                currentEmp: {},                current: 'SAVE',            });        }    };    setIndex(index){        var emp = this.state.employees[index];        emp.index = index;        this.setState({            currentEmp: emp,            current: 'Update',            index  //set index in state        });    }

Answer 1

你的问题是这个，

currentEmp: {}

您正在设置currentEmp为空白对象，并且在Form组件中使用此对象在 中设置状态componentDidUpdate，Form组件中的结果状态未获取值。

也不要直接改变状态。

您可以将您的currentEmp值对象设置为空，并且您的状态更新应该是，

this.setState({

   employees: this.state.employees.map((emp,index) => index === this.state.index ? {name,age,email} : emp),

   current: 'SAVE',

   currentEmp:{name:'',age:'',email:''}

});

同样在您的Form组件中，在submit您正在执行此操作的功能中，

this.setState({name: '', age: '', email: ''});

设置时不需要currentEmp:{name:'',age:'',email:''}。你的componentDidUpdate方法会解决这个问题。

Answer 2

您是否尝试过读取submit函数中的属性？喜欢：

submit() {

    const { name, age, email  } = this.state;

    if (this.props.submitMe) {

        this.props.submitMe(name, age, email);

    }

    this.setState({name: '', age: '', email: ''}); // clear form after click on submit

}