React使用useState向数组Push对象时操作异常问题求助

核心错误原因 #

• 状态作用域错误：你把nameList状态定义在了MItem子组件内部，这意味着每个列表项的MItem实例都拥有独立的、互不共享的nameList数组。你点击不同列表项的按钮，操作的是各自组件内部的独立数组，自然不会保留其他项的操作结果，这就是你第二个问题的根源。
• 首次点击不生效的错觉来源：React的setState是异步批量更新的，如果你在setName调用后立即打印nameList，拿到的永远是本次更新前的旧值，所以会产生「第一次点击没生效」的错觉，实际上状态已经完成更新，只是读取时机不对。

修正方案 #

把nameList状态提升到渲染MItem列表的父组件中，再将更新方法通过props传递给每个MItem子组件，所有子操作共享同一个数组状态即可。

父组件示例代码 #

import React, { useState } from 'react';
import MItem from './MItem';

// 渲染列表的父组件
const ListContainer = () => {
  // 状态移到父组件，所有子组件共享该数组
  const [nameList, setNameList] = useState([]);
  // 此处打印可拿到最新的状态值，验证更新结果
  console.log('当前选中列表：', nameList);

  return (
    <div>
      {/* 10条列表渲染逻辑示例，替换为你的实际数据源即可 */}
      {listData.map(item => (
        <MItem 
          key={item.id}
          title={item.title}
          pic={item.pic}
          year={item.year}
          // 传递更新方法给子组件
          onChoose={currentProps => setNameList(prev => [...prev, currentProps])}
        />
      ))}
    </div>
  )
}
export default ListContainer;

调整后的MItem组件代码 #

import React from 'react';
const MItem = (props)=>{
  const NameHandler = ()=>{
    // 调用父组件传入的共享状态更新方法
    props.onChoose(props);
  }
  return (
    <div>
      <div>
        <h3>{props.title}</h3>    
        {/* 补充alt属性避免React警告 */}
        <img src={props.pic} alt={props.title} />
        <p>{props.year}</p>
      </div>
      <div>
        <button onClick={NameHandler}> Choose </button>
      </div>
    </div>
  )
}
export default MItem;

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