useState 钩子中的初始值答案

【问题标题】：Initial value in useState hookuseState 钩子中的初始值
【发布时间】：2020-12-22 21:24:04
【问题描述】：

在这种情况下，将 useState 中的初始值设为空数组是否有意义：

  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios
      .get('/shoes')
      .then((res) => {
        setProducts(res.data);
      })
      .catch((err) => {
        console.error(err);
      });
  }, []);

什么时候应该有初始值，什么时候没有？

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

使用与结果相同的初始状态 shape 可以使以后使用有状态变量更容易。例如，如果您使用空数组作为初始状态，稍后，您将能够：

return (
  <div>
    {products.map(prod => <span>{prod.name}</span>)}
  </div>
);

而如果您没有使用初始状态，则必须首先确保 products 存在：

return (
  <div>
    {products?.map(prod => <span>{prod.name}</span>)}
  </div>
);

或

return (
  <div>
   {products && products.map(prod => <span>{prod.name}</span>)}
  </div>
);

【讨论】：

这很有道理，感谢您的快速回答

【解决方案2】：

我们通常在初始 API 调用本身中处理 error 场景和 loading 场景。 API 调用来自useEffect()。

但是，useEffect() 钩子仅在我们的 JSX 初始渲染后调用。要处理上述所有情况，最好始终将 state 的初始值与其适当的数据类型保持一致。

其次，我们还可以在同一个 React 组件中使用许多 useEffect() 钩子来处理它们各自的任务，因为 useEffect() 确实将第二个参数作为数组中的状态列表 - 充当 componentDidUpdate() 生命周期钩子，因此了解我们将在应用程序的后面部分使用的状态及其类型，并将其保存在 useState() 中最初可以轻松处理数据。

【讨论】：