useState 使用新的 Array 方法定义一个空数组

Question

I am getting data which is an array of objects from the store. In useState I want to set an array of data.length size all set to false initially. But when I set the value it returns an empty array [] for each of the state variable I set. I also tried updating the state in the useeffect but nothing works. I am unable to figure out what is the issue here.

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();
      }, []);

image of console the data Here is my jsx where i am creating the table

<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>

Here is the image of the table in console data.length is showing 0 two times and then 30. I am populating the data in the reducers in its parent component. But still all the arrays are undefined. And in the table all i am showing in the data table are undefined. (Note: I am creating a table of length data.length. data.image, data.description are showing in the table only the buttons that are showing only when clicked1[index] == false are not defined.

Answer 1

Unless data.length is 0, this gotta work.

    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

Your code seems fine.

Possible bug may be -> data.length being 0.

To check add console.log(data.length) after data is set.

Now the code:

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

Edit:

Add data as dependency.

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