useState 传播语法

Question

当我设置 setItemPressed({[itemid]: false, ...itemPressed}) 时，itemid 不会更改为 false，但是当我 setItemPressed({[itemid]: false}) itemid cahnges 为 false ，但所有其他 ID 都被删除。我如何才能让其他 ID 保留而这个 ID 发生变化？

  const [itemPressed, setItemPressed] = useState({});
    const changeColor = (itemid) => {
    if(itemPressed.hasOwnProperty(itemid)){
      setItemPressed({[itemid]: false, ...itemPressed})
    }
    else{
    setItemPressed({...itemPressed, [itemid]: true});
  }}

Answer 1

你能试着改变放置 ...itemPressed 和你的属性

的顺序吗

const [itemPressed, setItemPressed] = useState({});
    const changeColor = (itemid) => {
    if(itemPressed.hasOwnProperty(itemid)){
      setItemPressed({...itemPressed,[itemid]: false,})
    }
    else{
    setItemPressed({...itemPressed, [itemid]: true});
  }}

Answer 2

顺序很重要。

      setItemPressed({[itemid]: false, ...itemPressed})

应该翻转：

      setItemPressed({...itemPressed, [itemid]: false})

以后的优先于之前的。

编辑: 按键不起作用的原因是按键一直在对象中。将其设置为 false 不会删除它，因此 hasOwnProperty 在第一次按下后将始终 return true，并且将始终设置为 false。

以下是重写它以在未按下时删除键的方法：

 const [itemPressed, setItemPressed] = useState({});
    const changeColor = (itemid) => {
    // Create a copy of the state
    const newItemPressed = {...itemPressed};

    if(newItemPressed.hasOwnProperty(itemid)){
      // Delete the key from the object, this way you don't have unnecessary
      // keys still in there.
      delete newItemPressed[itemid];
    }
    else{
      newItemPressed[itemid] = true;
    }
    
    setItemPressed(newItemPressed);
}

Answer 3

你可以像这样在使用状态中设置 false

const [itemPressed , setItemPressed] = useState(false);

然后像这样设置状态：

setItemPressed(!itemPressed);

当你按下时它会改变状态

useState 传播语法

useState spread syntax

reactjs

react-native