Question

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

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

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

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

Answer 1

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

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

Answer 2

我们通常在初始 API 调用中处理 error 场景和 loading 场景。 API 调用是从 useEffect() 进行的。

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

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

useState 钩子中的初始值

2 个答案: