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

Question

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

Test.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>
);

Button.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 时，当我按 2 时，lightList [1] 被创建为 [1]，[2]，当我再次按 1 时，它变成 [1,1]。我希望它采用 lightList [1,2,7,3] 的形式。每个索引创建一个单独的列表。我该如何编辑它？

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

Answer 1

您需要在将 ID 添加到列表之前检查该 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>
  );
}

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

How can I create a global array in react? When I do separate operations for each index, I want them to save them in a single array

javascript

reactjs

react-redux

react-hooks

use-state