React状态变更后视图未更新：修改数组元素saved_id后列表渲染异常

你遇到的视图不更新问题，由三层代码写法的缺陷共同导致，逐点说明如下：

1. 子组件错误地将传入props缓存为局部状态 #

很多开发者遇到这类问题时会误以为genderFilteredNames没有捕获到源数据变更，但实际上这个常量是每次组件重渲染时基于searchFilteredNames实时计算的——只要searchFilteredNames的内容更新，过滤结果一定会同步变化。你看到的视图不更新，核心问题出在子组件的状态写法：
子组件中const [saved, setSaved] = useState(props.saved)、const [name, setName] = useState(props.name)这类写法，只会在组件首次挂载、初始化实例时读取一次props的值。后续哪怕父组件传入的saved、name属性随状态更新发生变化，子组件内部的局部state永远不会自动同步更新。你在控制台看到的数组数据确实更新了，传给子组件的props也确实变了，但子组件全程在用第一次挂载时拿到的旧值渲染，最终就表现为按钮文字不切换、列表视图不更新。

2. 父组件状态更新未遵循不可变数据规则 #

updateSave函数里的浅拷贝写法存在缺陷：

• 用[...names]仅生成了新的数组第一层引用，数组内存储的所有对象还是和原names数组共享同一个引用
• 直接执行newNames[index].saved_id = savedId本质上是直接修改了原对象的属性，这种写法属于React状态更新的反模式，极易引发引用混乱、状态脏读的问题

3. 不必要的派生状态存储制造了同步负担 #

你把从原始names计算得到的searchFilteredNames单独存在了useState里，还需要额外写一个useEffect监听names变化手动同步这个值。但这个列表本质是纯派生数据：只要原始names、搜索关键词、性别过滤值确定，这个列表的结果就唯一确定，根本不需要作为独立状态存储。手动维护同步逻辑一旦出现引用不一致、同步时机偏差，就会出现“控制台看到源数据变了，但过滤结果没跟上”的问题。

• 修正子组件逻辑：移除无意义的局部状态缓存，直接基于传入的props渲染内容，不需要在子组件内部复制一份和props完全一致的状态：

  export default function Name(props) {
    const useFn = props.use;
    const saveFn = props.save;
  
    function savedStatus() {
      return props.saved === 1 ? <>Save</> : <>Remove</>;
    }
  
    return (
      <tr>
        <td>{props.name}</td>
        <td className="actions-2">
          <button className="btn btn-tan" onClick={useFn}>
            <FaRegEdit />
            Use
          </button>
          <button className="btn btn-tan" onClick={saveFn}>
            <GiSaveArrow />
            {savedStatus()}
          </button>
        </td>
      </tr>
    )
  }
  

• 修正父组件的不可变更新逻辑：更新数组条目时，生成全新的对象替换旧条目，不直接修改原对象的属性：

  function updateSave(id, savedId) {
    const newNames = names.map(name => {
      // 匹配到目标条目，返回全新的对象，不修改原对象引用
      if (name.id === id) {
        return { ...name, saved_id: savedId }
      }
      // 非目标条目保留原有引用，减少不必要的对象创建
      return name
    })
    setNames(newNames)
  }
  

• 移除冗余的派生状态：删掉searchFilteredNames的独立state、以及对应的同步useEffect，所有过滤逻辑在每次组件渲染时即时计算：

  // 假设searchKeyword是存储搜索输入的独立state
  const searchFilteredNames = names.filter(name => 
    name.name.includes(searchKeyword)
  )
  
  const genderFilteredNames = searchFilteredNames.filter(name => 
    name.status_id === 1 && name.gender_id === genderFilter
  )
  

  这种写法下，只要原始names、搜索关键词、性别过滤值任意一个发生变化，组件重渲染时就会自动算出最新的过滤结果，完全不需要手动维护中间状态的同步。

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