javascript - 如何在 react 中创建全局数组？当我对每个索引进行单独的操作时，我希望它们将它们保存在一个数组中

Question

我有多个按钮。当我按下这些按钮时，它会改变颜色。首先，我按下编号为 1 的按钮，它变成绿色。然后我按下 2 号按钮，它变成绿色。然后当我按下 2 号按钮时，颜色变成红色。其代码如下。

测试.jsx:

const Test = () => {
return (
  <Row>
      <Col md={12} xs={16}>
         <Card
         ctTableFullWidth
         ctTableResponsive
         content={
         <div>
         {lightAPI.map((item) => {
         return <Button key={item.id} index={item.id} value={item.id} 
         lightAPI={item} />;
         })}
         </div>
         }
         />
      </Col>
   </Row>
);

按钮.jsx

export default function Button({ lightAPI, index }) {
        const [lightList, setLightList] = useState([]);
        const [buttonColor, setButtonColor] = useState(green);

        function handleColorChange(e) {
        const newButton = e.target.style.backgroundColor;
        const newColor = buttonColor === green ? red : green;
        setButtonColor(newColor);
        if (newColor === green) {
            setLightList([...lightList, lightAPI.id])
        }
        else{
        //remove list
        }
    }

return (
        <div>
            <button
                style={{ backgroundColor: buttonColor }}
                color={buttonColor}
                onClick={handleColorChange}
                index={index}
                ></button>
        </div>                  
    );

我想将绿色按钮的编号发送到 API。为此，我想将绿色按钮的编号添加到作为 lightList 的列表中。当按钮呈红色时，我应该能够将它们从该列表中删除。

当我执行添加到列表操作时，它会为每个数字创建一个不同的列表。例如，当我按1时，lightList [1]被创建为[1]，当我按2时，[2]，当我再次按1时，它变成[1,1]。我希望它是 lightList [1,2,7,3] 的形式。每个索引都会创建一个单独的列表。我该如何编辑它？

当我单击 2 时，如果它是绿色的，则会将其添加到列表中，列表如下所示 [2]。当我单击 3 时，如果它是绿色的，则列表如下所示 [3]。如果当我点击 2 和 3 时它是绿色的，我希望它看起来像这样 [2,3]。

Answer 1

在将其添加到列表之前，您需要检查该 ID 是否存在。我重写了您的代码来实现此检查

测试组件

const Test = () => {
  const [lightList, setLightList] = useState([]);

  return (
    <Row>
      <Col md={12} xs={16}>
        <Card
          ctTableFullWidth
          ctTableResponsive
          content={
            <div>
              {lightAPI.map((item) => {
                return <Button key={item.id} index={item.id} value={item.id}
                  lightAPI={item} lightList={lightList} setLightList={setLightList} />;
              })}
            </div>
          }
        />
      </Col>
    </Row>
  );
}

按钮组件

export default function Button({ lightAPI, index, lightList, setLightList }) {
  const [buttonColor, setButtonColor] = useState(green);

  const handleColorChange = (e)=> {
    const newButton = e.target.style.backgroundColor;
    const newColor = buttonColor === green ? red : green;
    setButtonColor(newColor);
    if (newColor === green) {
      if (!lightList.includes(lightAPI.id)) {
        // add the id only if it does not existss in lightList
        setLightList([...lightList, lightAPI.id])
      }
    }
    else {
      if(lightList.includes(lightAPI.id)){
        // filter out the ID to remove
        const newList = lightList.filter((lightID) => lightID !== lightAPI.id)
        setLightList(newList)
      }
    }
  }

  return (
    <div>
      <button
        style={{ backgroundColor: buttonColor }}
        color={buttonColor}
        onClick={handleColorChange}
        index={index}
      ></button>
    </div>
  );
}