如何从useState中的不同字符串合并为一个对象？答案

【问题标题】：how to merge into one object from different strings in useState?如何从useState中的不同字符串合并为一个对象？
【发布时间】：2020-08-17 16:15:50
【问题描述】：

我需要使用来自不同文本输入的不同数据写入值挂钩

const [value, setValue] = useState({
  title: '',
  url: '',
  description: '',
});

<View style={styles.input_container}>
  <TextInput
    onChangeText={text => handleChange(text)}
    value={value.title}
    placeholder="enter book title"
  />
  <TextInput
    onChangeText={text => handleChange(text)}
    value={value.url}
    placeholder="link to book"
  />

  <TextInput
    onChangeText={text => handleChange(text)}
    value={value.description}
    placeholder="description"
  />
  <Button title="add" onPress={pressHandler} />
</View>;

错误的处理程序

const handleChange = val => {
  setValue({
    value: {
      title: val,
      url: val,
      description: val,
    },
  });
};

谢谢。

【问题讨论】：

这是useReducer reactjs.org/docs/hooks-reference.html#usereducer 的可靠用例，或者，您可以创建多个useState 变量。

标签： javascript reactjs react-native react-hooks

【解决方案1】：

您可以使用指示来指示您指的是哪种键：

const handleChange = ({ type, text }) =>
  setValue((prev) => ({ ...prev, [type]: text }));

const [value, setValue] = useState({
  title: "",
  url: "",
  description: "",
});

<View style={styles.input_container}>
  <TextInput
    onChangeText={(text) => handleChange({ type: `title`, text })}
    value={value.title}
    placeholder="enter book title"
  />
  <TextInput
    onChangeText={(text) => handleChange({ type: `url`, text })}
    value={value.url}
    placeholder="link to book"
  />

  <TextInput
    onChangeText={(text) => handleChange({ type: `description`, text })}
    value={value.description}
    placeholder="description"
  />
  <Button title="add" onPress={pressHandler} />
</View>;

【讨论】：

【解决方案2】：

如果您使用useState 挂钩，您可以这样做。

const [title, setTitle] = useState('');
const [url, setUrl] = useState('');
const [description, setDescription] = useState('');

<
View style = {
    styles.input_container
  } >
  <
  TextInput
onChangeText = {
  text => setTitle(text)
}
value = {
  value.title
}
placeholder = "enter book title" /
  >
  <
  TextInput
onChangeText = {
  text => setUrl(text)
}
value = {
  value.url
}
placeholder = "link to book" /
  >

  <
  TextInput
onChangeText = {
  text => setDescription(text)
}
value = {
  value.description
}
placeholder = "description" /
  >
  <
  Button title = "add"
onPress = {
  pressHandler
}
/> < /
View >

【讨论】：