尝试使用 React Hooks 为一个状态实现多个值答案

【问题标题】：Trying to implement multiple values to a state using React Hooks尝试使用 React Hooks 为一个状态实现多个值
【发布时间】：2021-07-26 20:22:22
【问题描述】：

const [tag, setTag] = useState([]);
const [selectedItem, setSelectedItem] = useState("");


const dataSource = [
{ id: 1, name: "Sad af" },
{ id: 2, name: "Sad boy" },
{ id: 3, name: "idk" },
{ id: 4, name: "Sad" },
{ id: 5, name: "Javascript" },
{ id: 6, name: "Kode" } ]



            <View style={styles.row}>
              {dataSource.map((item, index) => {
                return (
                  <View
                    style={{
                      margin: 5,
                      flexWrap: "wrap",
                    }}
                  >
                    <Chip
                      key={item}
                      height={35}
                      textStyle={
                        selectedItem === item.name
                          ? styles.pressChipText
                          : styles.chipText
                      }
                      style={
                        selectedItem === item.name
                          ? styles.pressChip
                          : styles.chip
                      }
                      onPress={() => {
                        setSelectedItem(item.name), setTag(item.name);
                      }}
                    >
                      {item.name}
                    </Chip>
                  </View>
                );
              })}
            </View>

所以我正在尝试向标签状态添加更多值，以便用户可以向标签状态添加更多值。目前，该代码只允许将一个值存储在标签中。我想给标签状态添加一个或多个值的选项。你们有什么聪明的主意吗？我正在使用 react-paper-chips 来可视化设计。

【问题讨论】：

您正在尝试实现一种多选列表？
是的，没错。
您可以在您的状态中存储一个选定项目的数组，每次按下一个项目时，您都可以将该项目推入该数组

标签： arrays reactjs react-native react-hooks

【解决方案1】：

这是因为您将tag 初始化为一个数组，但将其设置为特定值。而不是 setTag(item.name) 向数组中添加一个值，如下所示：

const addTag = (name) => {
    const newTag = [...tag];
    newTag.push(name);
    setTag(newTag);
}

并称之为：addTag(item.name)。

【讨论】：

【解决方案2】：

也许您可以将 Tag 设为对象数组而不是名称，例如 {name: "selectedItem"} 所以，你可以这样做

   onPress={() => setTag(previousState=>([...previousState, {[item.name]: item.name}]))}

previousState 让您可以跟踪您放在标签状态中的其他输入值，这样您就不会覆盖它们，并且可以继续收集 newState。

【讨论】：

【解决方案3】：

很简单

只需进行此更改setTag([...tag, item.name] [it's called spread syntax]

  onPress={() => {
       setSelectedItem(item.name), setTag([...tag, item.name]);
 }}

【讨论】：

感谢您的帮助！但是，如果我想在单击后删除该值怎么办？例如。我点击一个值，然后我想从状态标签中删除它。因为现在如果我点击一个值，它就会成倍增加。