Reactjs-TypeError:无法读取属性'；价值'；空的

我是新来的，仍然在练习reactjs。我的输入表单中有一个问题，每当我键入任何键时，我总是得到TypeError：无法读取null的属性“value”

这是我的代码：

import React, { useState } from 'react';

export default function FormPractice() {
const [isDefault, setIsDefault] = useState('');
const [balance, setBalance] = useState({amount: null});

return (
  <div className="input">
    <input placeholder="enter balance here" onChange={e => setBalance(form => ({...form, [e.target.value]: e.target.value}))} value={isDefault}/>
  </div>
)
}

import React，{useState}来自“React”；
导出默认函数FormPractice（）{
const[isDefault，setIsDefault]=useState（“”）；
const[balance，setBalance]=useState（{amount:null}）；
返回(
setBalance（form=>（{…form[e.target.value]：e.target.value}））}value={isDefault}/>
)
}

谢谢你的帮助。

做出反应。当您使用函数更新时，在调用函数时，事件已被擦除以供重用。要在函数更新中使用该事件，您需要调用

e.persist（）

，这将从重用池中取出该事件，并让它保留其值

要使其保持内联，它将如下所示：

onChange={e=>{e.persist（）；setBalance（form=>（{…form[e.target.value]：e.target.value}））}

或者，为了使其更具可读性，请将其移动到自己的功能中：

const onChange=（e）=>{
e、 坚持（）；
setBalance（form=>（{…form[e.target.value]：e.target.value}）；
}

但是，最简单的解决方案是根本不使用功能更新。您正在替换状态值，但未设置从上一状态派生的任何值。因此，使用普通更新是安全的：

onChange={e=>setBalance（{…balance[e.target.value]：e.target.value}）

现在，事件重用已经不是问题了

旁注：

[e.target.value]：e.target.value

这没有什么意义。您正在将具有新值名称的对象键设置为相同的值

似乎您以前见过

[e.target.name]：e.target.value

，并对其进行了修改。我建议使用名称，然后为

输入提供要更新的属性的名称

以下是一个简化的示例：


const{useState，useffect}=React；
常量示例=（）=>{
const[state，setState]=useState（{input1:'}）；
const onChange=（e）=>{
setState（{[e.target.name]：e.target.value}）；
}
返回(
);
}
ReactDOM.render（，document.getElementById（'root'））
我尝试过，但无法输入任何键