ReactJS列表组件更新异常：父子组件日志数据不一致问题

这是React开发里非常常见的「props初始化state未同步更新」的坑，我来帮你拆解问题和解决方案：

问题根源 #

你父组件的available状态已经正确更新了，但子组件MenuItem还保留着已移除的项，核心原因大概率是：
你的MenuItem组件在初始化时，把传入的props.item直接存在了自己的state里（不管是类组件的constructor，还是函数组件的useState），但这个初始化动作只会在组件第一次挂载时执行一次。后续父组件的props更新了，子组件的state不会自动跟着同步，导致渲染的还是旧数据——哪怕你把concat换成扩展运算符，本质上只是父组件状态更新的写法，解决不了子组件state不同步的问题。

比如你可能写了类似这样的错误代码：

// 类组件错误示例
class MenuItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentItem: props.item // 仅挂载时赋值一次
    };
  }
  // ...后续渲染用this.state.currentItem
}

// 函数组件错误示例
function MenuItem(props) {
  const [currentItem] = useState(props.item); // 仅初始化时赋值一次
  // ...后续渲染用currentItem
}

针对性解决方案 #

根据你的场景，按优先级推荐这几个方案：

1. 直接使用props，抛弃子组件自身state

如果MenuItem不需要独立维护状态，只是负责渲染和触发点击事件，那完全没必要把props存到自己的state里。直接渲染props.item即可，这样父组件props更新时，子组件会自动同步渲染最新值：

function MenuItem(props) {
  // 直接用props.item，不用存state
  return (
    <div>
      <span>{props.item.name}</span>
      <button onClick={() => props.onAdd(props.item)}>Add</button>
    </div>
  );
}

2. 监听props变化，同步更新子组件state

如果MenuItem必须要维护自己的状态（比如有本地编辑逻辑），那需要主动监听props的变化来更新state：

• 类组件可以用getDerivedStateFromProps或者componentDidUpdate：

class MenuItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentItem: props.item
    };
  }

  // 推荐用这个静态方法，更符合React的状态更新逻辑
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.item.id !== prevState.currentItem.id) {
      return { currentItem: nextProps.item };
    }
    return null;
  }

  // 或者用componentDidUpdate（适合有副作用的场景）
  // componentDidUpdate(prevProps) {
  //   if (prevProps.item.id !== this.props.item.id) {
  //     this.setState({ currentItem: this.props.item });
  //   }
  // }

  render() {
    return <div>{this.state.currentItem.name}</div>;
  }
}

• 函数组件用useEffect监听props变化：

function MenuItem(props) {
  const [currentItem, setCurrentItem] = useState(props.item);

  useEffect(() => {
    // 当props.item变化时，同步更新state
    setCurrentItem(props.item);
  }, [props.item]); // 依赖项里加上props.item

  return <div>{currentItem.name}</div>;
}

3. 确保列表项的key属性唯一且稳定

因为你用了react-infinite虚拟滚动组件，必须给每个MenuItem设置唯一且不随位置变化的key（比如用item的id，绝对不要用数组索引）。React依赖key来识别哪些组件需要更新、卸载，如果key不对，会导致React复用旧的组件实例，哪怕props变了也不会正确渲染：

// 父组件渲染列表时的正确写法
<Infinite>
  {this.state.available.map(item => (
    <MenuItem 
      key={item.id} // 用item的唯一id当key，不要用index
      item={item} 
      onAdd={this.addItem} 
    />
  ))}
</Infinite>

总结 #

先检查MenuItem是否真的需要自己维护state，能直接用props就尽量用；如果必须用state，一定要监听props变化同步更新；最后确认列表项的key是否正确。这三个步骤下来，你的列表项状态不同步问题应该就能解决了。

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