gpt4 book ai didi

javascript - React Updater 功能不起作用。常规 setState 不知何故? (无法读取 null 的属性 'name')

转载 作者:行者123 更新时间:2023-11-30 14:40:41 24 4
gpt4 key购买 nike

今天我了解了更新函数,并且由于 React 16 的纤程核心,最好使用它们。

这是不起作用的代码:

  handleChange(e) {
this.setState((state, props) => ({
[e.target.name]: e.target.value
}));
}

这里是确实有效的代码:

  handleChange(e) {
this.setState({[e.target.name]: e.target.value});
}

我确实像这样在构造函数中绑定(bind)了函数:

this.handleChange = this.handleChange.bind(this);

我在其中调用 handleChange 的输入如下所示:

  <input
className="todo-input"
type="text"
name="newTodo"
value={this.state.newTodo}
onChange={this.handleChange}
/>

出于某种原因,在第二个版本中,React 抛出以下错误:

Uncaught TypeError: Cannot read property 'name' of null

有人可以向我解释一下我的代码有什么问题吗?

PS:我从 this 了解到更新程序功能博文。

最佳答案

尝试使用这个:

handleChange(e) {
e.persist();

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

}

或者这个:

handleChange(e) {

const value = e.target.value;
const name = e.target.name;

this.setState((state, props) => ({
[name]: value
}));

}

关于javascript - React Updater 功能不起作用。常规 setState 不知何故? (无法读取 null 的属性 'name'),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49721825/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com