如何在软件首次启动时初始化items状态？（UseState与UseEffect）

常见原因及对应修改方案 #

1. 异步数据加载时机问题 #

如果items的数据来自异步请求，首次渲染时请求还未完成，就会导致setItems没被触发。

• 修改方式：
  在组件的useEffect钩子中发起请求，请求成功后立即调用setItems赋值，同时确保useEffect的依赖数组仅在组件挂载时执行一次。
  示例代码：

  import { useState, useEffect } from 'react';
  
  function TargetComponent() {
    // 先初始化空数组，避免出现undefined状态
    const [items, setItems] = useState([]);
  
    useEffect(() => {
      const fetchData = async () => {
        // 替换为你的实际请求逻辑
        const res = await fetch('/your-api/items');
        const data = await res.json();
        setItems(data);
      };
  
      fetchData();
    }, []); // 空依赖数组，确保组件挂载时仅执行一次
  
    return (
      <div>
        {items.map(item => <div key={item.id}>{item.content}</div>)}
      </div>
    );
  }
  

2. 状态未设置合理默认值 #

如果items初始状态是undefined，首次渲染时会呈现“未被设置”的状态。

• 修改方式：
  初始化useState时设置兜底默认值，比如空数组[]：

  // 错误写法
  const [items, setItems] = useState();
  
  // 正确写法
  const [items, setItems] = useState([]);
  

3. 条件赋值逻辑限制 #

如果setItems被包裹在条件判断中，首次启动时条件不满足就不会执行赋值。

• 修改方式：
  检查条件逻辑，确保首次渲染时能触发setItems。如果依赖props数据，要把props加入useEffect的依赖数组：

  useEffect(() => {
    // 确保props传入的数据存在时再赋值
    if (props.initItems) {
      setItems(props.initItems);
    }
  }, [props.initItems]); // 监听props变化，数据更新时重新赋值
  

额外优化点 #

• 不要在组件渲染阶段直接调用setItems，避免无限重渲染，必须放在useEffect或事件处理函数中。
• 如果依赖本地存储数据，初始化时直接从存储读取：

  const [items, setItems] = useState(() => {
    const saved = localStorage.getItem('items');
    return saved ? JSON.parse(saved) : [];
  });
  

内容的提问来源于stack exchange，提问作者SiCaMa