如何分別從array.map()更新元素的狀態？

在我的代碼中，我試圖根據物件上的背景資料檢索背景影像，但是這些背景也會根據元素的狀態而改變。

首先，我的資料陣列如下所示：

   const Cube = [
      {
         name: "foo"
         faces: [
            {
               data: [
                  [{bonus: "bar", bg: "bar2"}],
                  ...
               ],
               ...
            },
            ...
         ],
         ...
      },
      ...
   ];

這就是我的 App.js 的樣子：

  function App() {
    const [cellState, setCellState] = useState("inactive");

    return (
      <div className="App">
        <div id="cube-container">
          {Cube[0].faces[0].data.map((row) => {
            return row.map((cell, index) => {
              return (
                <img
                src={require(`./assets/cube/Square_Cube_Icon/${cell.bg}${
                  cellState === "inactive" ? "_Unlit" : "_Partial"
                }.png`)}
                alt={`${cell.bg} background`}
                className="cellItem"
                onClick={() => setCellState("active")}
                state={cellState}
                key={index}
              />
            );
          });
        })}
      </div>
    </div>
  );
}

問題是，在 4x4 網格輸出中，如果我點擊任何專案，而不是因為狀態改變而改變被點擊元素的背景，它會改變每個單元格的背景，這應該發生，因為 useState 在它們之間共享。我怎樣才能讓 map 函式的每個元素都有自己的狀態，我可以單獨更新？

找到了解決辦法：

將其分離為一個組件并將鍵和單元格值作為道具傳遞，然后在內部創建和操作狀態解決了問題。選擇的答案也解決了這個問題。

這是未來讀者的解決方案。

應用程式.js

function App() {
  return (
    <div className="App">
      <div id="cube-container">
        {CubeOfTruth[0].faces[0].data.map((row) => {
          return row.map((cell, index) => {
            return <CubeItem key={index} cell={cell} />;
          });
        })}
      </div>
    </div>
  );
}

CubeItem.js

function CubeItem({ cell, index }) {
  const [cellState, setCellState] = useState("inactive");

  return (
    <img
      src={require(`../assets/cube/Square_Cube_Icon/${cell.bg}${
        cellState === "inactive" || cellState === "partial" ? "_Unlit" : ""
      }.png`)}
      alt={`${cell.bg} background`}
      className="cellItem"
      onClick={() => setCellState("active")}
      state={cellState}
      key={index}
    />
  );
}

uj5u.com熱心網友回復：

這是一種使用物件管理多個狀態的簡單方法，該物件的鍵代表您的單元格，而值則代表它是活動的還是非活動的。這也很容易概括，因此如果您添加更多單元格，那么您只需將其添加到 initialState 中，其余代碼應按原樣作業。

function App() {

   // const [cellState, setCellState] = useState("inactive");
    
    const initialState = {
      bar1: "inactive",
      bar2: "inactive",
      bar3: "inactive",
      bar4: "inactive",
    }

   const [cellState, SetCellState] = React.useState(initialState);

   const handleSetCellState = (key)  => {   
    setCellState({
     ...cellState,
     [key]: "active",
    });   
   }; 


    return (
      <div className="App">
        <div id="cube-container">
          {Cube[0].faces[0].data.map((row) => {
            return row.map((cell, index) => {
              return (
                <img
                src={require(`./assets/cube/Square_Cube_Icon/${cell.bg}${
                  cellState[cell.bg] === "inactive" ? "_Unlit" : "_Partial"
                }.png`)}
                alt={`${cell.bg} background`}
                className="cellItem"
                onClick={() => handleSetCellState(cell.bg)}
                state={cellState[cell.bg]}
                key={index}
              />
            );
          });
        })}
      </div>
    </div>
  );
}

標籤：反应 使用状态

上一篇：如何解構來自useFetch的物件？

下一篇：會話變數和三星互聯網