我是新手，仍在使用 reactjs 练习。我的输入表单有问题，每当我输入任何键时，我总是得到 TypeError：无法读取 null 的属性“值”
这是我的代码：
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>
)
}
谢谢您的帮助。
React重用事件。当您使用功能更新时，在调用该函数时，该事件已被擦除以供重用。要在功能更新中使用该事件，您需要调用e.persist()它来将该事件从重用池中取出并让它保留其值。
为了保持内联，它看起来像这样：
onChange={e => {e.persist(); setBalance(form => ({...form, [e.target.value]: e.target.value}))}}
或者为了使其更具可读性，将其移动到自己的函数中：
const onChange = (e) => {
e.persist();
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并修改过它。我建议使用名称，然后给出input要更新的属性的名称。
这是一个简化的示例：
const {useState, useEffect} = React;
const Example = () => {
const [state, setState] = useState({ input1: '' });
const onChange = (e) => {
setState({[e.target.name]: e.target.value});
}
return (
<input
name="input1"
placeholder="enter balance here"
onChange={onChange}
value={state.input1}
/>
);
}
ReactDOM.render(<Example />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>