父组件状态更新后，从状态数组渲染的Alert子组件未获新Props

我之前也碰到过一模一样的糟心事——明明父组件里状态已经变了，子组件却像没看见似的，完全不更新。下面是几个最常见的排查方向和解决办法，你可以挨个试试：

1. 先检查子组件的key属性是不是设置对了 #

这是数组渲染子组件最容易踩的坑！React靠key来识别列表里的每个组件，如果你的Alert组件没设置唯一且稳定的key，React会误以为组件没变化，直接复用旧实例，自然不会更新props。

举个典型的错误写法：

{alertsList.map((alert, index) => (
  <Alert {...alert} />
))}

用数组索引当key的话，只要数组元素的顺序变了、或者有新增删除，React就会搞混组件身份，导致不更新。

正确的做法是用每个alert对象的唯一标识当key，比如id：

{alertsList.map(alert => (
  <Alert key={alert.id} {...alert} />
))}

2. 确认状态更新是「不可变操作」 #

React的状态更新靠引用变化触发重渲染，如果你直接修改原数组里的元素（比如alertsList[0].content = '新内容'），这种可变操作根本不会让React察觉到状态变了，父组件都不会重渲染，子组件当然接不到新props。

错误示范：

const updateAlert = () => {
  const newList = [...alertsList];
  newList[0].content = '更新后的提示'; // 直接修改对象属性，引用没变化
  setAlertsList(newList);
}

正确的不可变更新方式，要给修改的对象创建新引用：

const updateAlert = () => {
  setAlertsList(prevList => 
    prevList.map(alert => 
      alert.id === targetId ? {...alert, content: '更新后的提示'} : alert
    )
  );
}

这样被修改的alert是全新的对象，数组的引用也变了，React能准确检测到状态变化并触发重渲染。

3. 看看子组件是不是把props存进自己的state后没监听更新 #

有时候问题出在子组件本身：比如子组件把props存在了自己的state里，但只在初始化时赋值，后续props变化了也没同步更新state。

错误写法：

function Alert(props) {
  const [content, setContent] = useState(props.content);
  // 这里只在组件第一次渲染时用了props，后续props变了也不会更新state
  return <div>{content}</div>;
}

解决办法有两个：要么直接用props，别存子组件state；如果必须存，就加useEffect监听props变化：

function Alert(props) {
  const [content, setContent] = useState(props.content);
  
  useEffect(() => {
    setContent(props.content);
  }, [props.content]); // 监听props.content的变化
  
  return <div>{content}</div>;
}

4. 检查父组件的状态更新逻辑 #

如果你的更新逻辑依赖之前的状态，一定要用setState的函数式写法，避免闭包导致的「状态过期」问题：

// 推荐：函数式更新，确保拿到最新的状态
setAlertsList(prev => [...prev, newAlert]);

// 不推荐：如果在异步操作里，可能拿到的是旧状态
setAlertsList([...alertsList, newAlert]);

要是上面这些都排查过还是不行，可以把父组件和子组件的关键代码贴出来，这样能更精准地定位问题～

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