reactjs - useState 钩子中的初始值

Question

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

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

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

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

标签： reactjsreact-hooks

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