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

Question

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

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

TextInputs：

<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，但无法使其正常工作。

Answer 1

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

覆盖

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

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

React Native: update state object with hooks and TextInput

react-native

react-hooks

react-state