useState 使用新的 Array 方法定義一個空數組

Question

我正在從商店獲取數據，它是一組對象。 在 useState 中，我想設置一個 data.length 大小的數組，最初都設置為 false。 但是，當我設置該值時，它會為我設置的每個 state 變量返回一個空數組 []。 我還嘗試在useeffect中更新state，但沒有任何效果。 我無法弄清楚這里有什么問題。

function Datatable() {
       let data = useSelector((state) => state.dish);
      console.log(data.length)
      const [clicked1, setClicked1] = useState(new Array(data.length).fill(false));
      const [clicked2, setClicked2] = useState(new Array(data.length).fill(false));
      const [clicked3, setClicked3] = useState(new Array(data.length).fill(false));
      const dispatch = useDispatch();
      function setAllStates() {
        setClicked1(new Array(data.length).fill(false));
        setClicked2(new Array(data.length).fill(false));
        setClicked3(new Array(data.length).fill(false));
      }
      useEffect(() => {
        setAllStates();
      }, []);

控制台數據的圖像這是我創建表的 jsx

<TableBody>
            {data.map((row, index) => (
              <TableRow
                key={row.id}
                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
              >
                <TableCell component="th" scope="row">
                  <img width={150} height={100} src={row.image} />
                </TableCell>
                <TableCell align="right">{row.dishName}</TableCell>
                <TableCell align="right">
                  {clicked1[index] == false ? (
                    <>
                      <Button
                        onClick={() => handleOnclick("Rank 1", index, row)}
                      >
                        Rank 1
                      </Button>
                    </>
                  ) : (
                    <Typography>Selected</Typography>
                  )}
                </TableCell>

這是控制台數據中表格的圖像。長度顯示 0 兩次，然后顯示 30。我在其父組件的減速器中填充數據。 但是所有的 arrays 仍然是未定義的。 在表格中，我在數據表中顯示的所有內容都是未定義的。 （注意：我正在創建一個長度為 data.length.data.image 的表，data.description 僅在表中顯示，僅在 clicked1[index] == false 時才顯示的按鈕未定義。

Answer 1

除非data.length為 0，否則這必須工作。

    function Datatable() {
          const data = useSelector((state) => state.dish);

          const [clicked1, setClicked1] = useState();
          const [clicked2, setClicked2] = useState();
          const [clicked3, setClicked3] = useState();

          const dispatch = useDispatch();

          function setAllStates(size) {
            const newArray = new Array(size).fill(false);
            setClicked1(newArray);
            setClicked2(newArray);
            setClicked3(newArray);
          }

          useEffect(() => {
            if(data) setAllStates(data.length);
          }, [data]);
     }

Answer 2

你的代碼看起來不錯。

可能的錯誤可能是 -> data.length 為 0。

在設置data后檢查添加console.log(data.length) 。

現在代碼：

let data = useSelector((state) => state.dish);
console.log(data.length) // if this is zero , this is causing empty array
const [clicked1, setClicked1] = useState(new Array(data.length).fill(false));
...

編輯：

添加data作為依賴項。

 useEffect(() => {
        setAllStates();
      }, [data]);