与对象反应状态挂钩

Question

const App = () => {
  const [User, setUser] = useState({
    id: 1,
    name: "ed",
    age: Number,
    edit: false
  });
  return (
    <div>
      <input value={User.name} onChange={e => setUser.name(e.target.value)} />
    </div>
  );
};

我正在使用React钩子。我将初始状态设置为一个对象。我尝试使用react挂钩更改值，但这会出现错误TypeError: setUser.name is not a function

Answer 1

setUser是用于更新状态的函数，由于它仅替换状态，因此您也需要合并以前的状态值。此外，事件已在回调中清除，因此您需要在使用setUser的回调之前获取值。为此，最好编写一个处理程序函数。您也可以编写一个通用函数来处理所有值的设置

const App = () => {
      const [User, setUser] = React.useState({
        id: 1,
        name: "ed",
        age: Number,
        edit: false
      }); 
      const handleChange = (e) => {
         const {value, name} = e.target;
         setUser(prev => ({...prev, [name]: val}))
      }
      return (
        <div>
          <input value={User.name} onChange={handleChange} />
        </div>
      );
    };
    ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app" />

Answer 2

让我们看看 User 和 setUser 的值

const [User, setUser] = useState({
    id: 1,
    name: "ed",
    age: Number,
    edit: false
  });

React.useState返回一个值和该值的设置器。setUser是一个函数。因此，虽然 User.name 是一个初始值为“ed”的字符串，但 setUser.name 并不存在。该错误TypeError: setUser.name is not a function是尝试向参数传递未定义值的结果。解决这个问题的一种方法是 Murtaza Hussain 和其他答案所建议的：

  <input 
    value={User.name}
    onChange={e => setUser(prev => ({...prev, name: e.target.value}))}
  />

作为替代方案，您可以使用自定义useObjState挂钩，它提供了相当简单的 API。

UseObjState 钩子

  <input 
    value={User.name}
    onChange={e => setUser(prev => ({...prev, name: e.target.value}))}
  />

它提供了一种更简单/更干净的方法来更新 name 属性的值。

function App() {
  const [user, setUser] = useObjState({
    id: 1,
    name: "ed",
    age: Number,
    edit: false
  });

  return (
    <input 
      value={user.name} 
      onChange={e => setUser.name(e.target.value)} />
    />
  )
}

演示