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

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

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

3 个答案: