React Native：使用钩子和 TextInput 更新状态对象

Question

我正在尝试通过 TextInput 字段更新功能组件中的状态对象，而不更改其他条目。

const [state, setState] = React.useState({
  foo: 'bar',
  baz: 'qux',
});

文本输入：

<TextInput
  id="foo"
  value={state.foo}
  onChangeText={(text) => updateState('foo', text)}
/>
<TextInput
  id="baz"
  value={state.baz}
  onChangeText={(text) => updateState('foo', text)}
/>

更新状态的（非工作）函数since state hooks don't allow merging states：

const updateState = (key, value) => {
  var newState = state;
  newState[key] = value;
  setState(newState);
};

这里有一个 prepared snack 来玩代码并查看它的实际效果。

如果您通过按钮将状态记录到控制台，您可以看到状态实际上在后台更新，尽管只有一个字符，除非您将某些内容粘贴到输入字段中。 如果我在 Android 上运行它，我实际上可以在 TextInput 中的文本被重置之前看到字符一小段时间。

我怀疑这与异步调用有关？我还尝试了使用onChange 而不是onChangeText 的this answer，但无法让它工作。

Answer 1

通过将状态的原始值传播到对象来更新状态，并用[key]: value (snack) 覆盖：

const updateState = (key, value) => {
  setState(oldState => ({
    ...oldState,
    [key]: value,
  }));
};