componentDidmount 内的 SetState 抛出错误答案

【问题标题】：SetState inside componentDidmount is throwing errorcomponentDidmount 内的 SetState 抛出错误
【发布时间】：2019-11-14 11:10:36
【问题描述】：

我是 React JS 的新手，并已开始在其中创建一个小型应用程序。我在SetState 中的componentDidmount 方法中遇到了一些问题。

我有一个父/主组件，我会从那里调用一个子组件并将Id 作为道具传递。根据 id，将发送 API 调用。从回调中获取所需数据后，我需要将输入框中检索到的数据设置为值。

错误：

“组件正在将文本类型的受控输入更改为不受控。输入元素不应从受控切换到不受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。”

使用的代码：

子组件：

import React from 'react';
class EditTodo extends React.Component {
constructor(props){
   super(props);

   this.onChangeTodoId = this.onChangeTodoId.bind(this);

   this.state={
    Todo_Id:''
   }
}

componentDidMount(){
    fetch('http://localhost:4000/todo/'+this.props.match.params.id)
    .then(response => response.json())
    .then(data => {
        this.setState({
        Todo_Id: data.Todo_Id
     })
    })
    .catch( (error)=>{
        console.log(error);
    })
}

onChangeTodoId(e){
    this.setState({
        Todo_Id: e.target.value
    });
}

render() { 
    return ( 
        <div>
            <form>
                        <div className="form-group">
                            <label>ID: </label>
                            <input
                                    type="text" 
                                    className="form-control"
                                    value={this.state.Todo_Id}
                                    onChange={this.onChangeTodoId}
                                    />
                        </div> 
            </form>
        </div>
     );
}
}


export default EditTodo;

【问题讨论】：

data.Todo_Id 的类型是什么？
改变输入框onChange代码这样
onChange={() => this.onChangeTodoId()}
你应该检查data.Todo_Id是否是undefined。我认为如果文本input 的值更改为undefined，则可能会发生此错误。
我刚刚执行了代码，你在onchange中的setState函数工作正常，你需要检查componentDidMount函数中的fetch方法响应。可能是 this.props.match.params.id 在传递给 api 时为 null 或未定义

标签： javascript reactjs setstate

【解决方案1】：

React 有 2 种类型的输入：受控或不受控。受控输入通过 value 属性接收一个值（更多信息here）

您的代码看起来不错，但在这种情况下，您的 data.Todo_Id 可能未定义，这会导致错误。您是否尝试记录您的 api 响应的输出？

【讨论】：