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

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

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

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

1 个答案: