javascript - componentDidmount 中的 SetState 抛出错误

Question

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

我有一个 parent/home 组件，我会从那里调用一个子组件并传递一个 Id 作为 prop。根据 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;

Answer 1

React 有两种类型的输入:受控或不受控。受控输入通过值属性接收值(更多信息 here)

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