更新状态后，使用set，状态仍然有空数组答案

【问题标题】：After updating state, using set, the state still has empty array更新状态后，使用set，状态仍然有空数组
【发布时间】：2019-07-15 08:51:02
【问题描述】：

在使用 setState 更新状态后，如果我记录状态，即使状态不为空，我也会得到空数组。

我有如下代码所示的钩子。

     const [pets, setPets] = useState([]);

     async function requestPets() {
        const { animals: animalsProperty } = await pet.animals({
          location,
          breed,
          type: animal
        });

        console.log(animalsProperty);

        setPets(animalsProperty || []);
        console.log(pets);
      }

在将setPets 设置为animalsProperty 后，在requestPets 函数内部，即使animalsProperty 不为空，当我记录宠物时，我在控制台中看到空数组。我可以知道为什么当我记录宠物时，宠物显示的是空数组而不是像animalsProperty这样的值吗？

【问题讨论】：

你可以试试 setPets(animalsProperty) 这样没有空数组吗？你能显示你在动物属性中得到的东西吗
我不认为空数组有任何问题，它只是一个或检查当 aniamlsProperty 为空时分配空数组。在 animasl 属性中，我得到一个像这样的数组：(3) [{…}, {…}, {…}]

标签： reactjs

【解决方案1】：

setPets 进行异步更新，因此如果您在设置状态值后立即console.log，则仍会显示先前的值，因为它将在后续组件的渲染中更新。

【讨论】：

【解决方案2】：

你可以使用回调看看它是否可以工作，因为你的函数是异步的

  setwww(b=>
            {
                return b||[];
            });

【讨论】：

setPets 是一个异步函数。也许这是行为背后的原因。是否可以编辑 setPets 函数，因为它与 React 库挂钩 useState 链接。是否可以在 setPets 上使用 await ？

【解决方案3】：

我认为pets 会按预期在渲染函数中更新。
触发setPets 后，它不会立即更新pets 的值。换句话说，您将在该渲染中获得相同的 pets 值。下面显示了顺序：

===初始渲染：===
1.Pets是[]
2. setPets(somePets) => 触发重新渲染
3.Pets是[]

===重新渲染：===
4.Pets是somePets

【讨论】：

完全相同的事情正在发生。但我在这里有一个问题.. 我在同一个文件中使用 pets 变量作为参数，如下所示，;结果文件以当前宠物值作为输入传递，用于 insdie 结果文件。在 Results.js 中： const Results = props => { console.log(props);常量命名输入属性 = props.命名输入属性； console.log(namedInputProperty);结果();}
nvevr 我明白了。当触发重新渲染时，结果文件获取更新的宠物，并且在此期间不会再次调用 setPets，因此是旧值。谢谢。
我添加了 useEffect ，它会在重新渲染后被释放并记录宠物的当前状态，useEffect(() => { console.log(pets); }, [pets]);我也相信 console.log 是异步函数，它将在重新渲染后调用，就像 useAffect 一样。我对吗？谢谢。
对不起，我没明白你的意思。 1.你可以直接在render里面使用console.log(pets)，它会给你宠物的当前值。 2.如果你只想在更新的时候记录宠物，用uesEffect(your method)就对了。