从 redux 存储获取数据时使用带数组的 usestate 挂钩

Question

我从最上面的下面这样的商店得到我的家人

const family:Family = useSelector((state:any) => state.family.family);

这是我家的对象

address: "No 48, Katukurunda"
enabled: true
id: 1
members: Array(2)
0: {id: "5", first_name: "Rohan", last_name: "Perera"}
1: {id: "4", first_name: "Sohani", last_name: "Perera"}
length: 2
__proto__: Array(0)
monthly_contribution: 50
name: "Mendis Family

你可以清楚地看到会员有 2 件商品

所以我有一个 UseState 项来计算这样的行号

const [rowNumber, setRowNumber] = useState<number[]>([]);

我在 setRowNumber 上面有一个 useEffect，就像这样

useEffect(() => {
    if (family) {
      family.members.forEach(() => {
        setRowNumber([...rowNumber, rowNumber.length + 1]);
      });
    }
  }, [family, setRowNumber]);

只是为了检查页面加载时有多少行可用，我添加了这段代码

  useEffect(() => {
    console.log(rowNumber);
  }, [rowNumber]);

但是上面的控制台日志显示了这个 [1]，一个只有一个项目的数组。第二个成员怎么了？

我使用 rowNumber.map() 来显示 Family 的可用成员。但是当页面加载时它只显示一个文本框，根据下面的 useEffect

这是正确的

useEffect(() => {
        console.log(rowNumber);
      }, [rowNumber]);

我在这里做错了什么？为什么 rowNumber 只有一项？

family.members 显然有 2 项

我刚刚意识到 rowNumber 数组中只包含最后一个值

Answer 1

在 React 中调用 setState() 是异步的，这意味着 setState 不会立即更新状态，所以在最后一次迭代中它会在你的状态中添加 0 + 1。尝试这样做：

 useEffect(() => {
    if (family) {
      const rows = [];
      family.members.forEach((value, i) => {
        rows.push(i + 1);
      });
      setRowNumber(rows);
    }
  }, [family, setRowNumber]);

Answer 2

可能与 setRowNumber 是异步的事实有关。您是否尝试过使用本地数组？类似于：

useEffect(() => {
    if (family) {
      let result = [];
      family.members.forEach(() => {
        result.push(result.length + 1);
      });
      setRowNumber(result);
    }
  }, [family, setRowNumber]);

Answer 3

useEffect 中的内容对于在 useState 中存储数组是错误的。

使用下面的代码，

 useEffect(() => {
        if (family) {
          family.members.map((item) => {
            setRowNumber(()=> { 
              console.log(item); // verify result with this console log
              return [...rowNumber, rowNumber.length + 1]
             });
          });
        }
      }, [family, setRowNumber]);

从 redux 存储获取数据时使用带数组的 usestate 挂钩

Using usestate hook with array when getting data from redux store

typescript

reactjs

react-redux

react-hooks

use-state