React状态变更后无法渲染列表项的问题求助

问题1：map回调未返回组件 #

你的代码中ps.map的回调使用花括号但未显式返回<MyP>组件，导致map返回全为undefined的数组，React无法渲染任何内容。

修复方式二选一：

• 替换花括号为圆括号，利用箭头函数隐式返回：

  ps.map((p) => <MyP index={p}/>)
  

• 保留花括号，添加显式return语句：

  ps.map((p) => { return <MyP index={p}/> })
  

问题2：异步状态更新导致的潜在不一致 #

handleClick中直接使用当前的n和ps更新状态，由于React的setState是异步批量执行的，连续调用时可能基于旧状态值计算，导致后续状态偏差。建议改用函数式更新，确保每次基于最新状态计算：

function handleClick() {
  setN(prevN => {
    const newN = prevN + 1;
    setPs(prevPs => [...prevPs, prevN]);
    console.log(newN, [...prevPs, prevN]);
    return newN;
  });
}

完整修复代码 #

function MyP({index}) {
    return (
        <p>{index}</p>
    );
}

function MyApp() {
    const [n, setN] = React.useState(1);
    const [ps, setPs] = React.useState([]);

    function handleClick() {
        setN(prevN => {
            const newN = prevN + 1;
            setPs(prevPs => [...prevPs, prevN]);
            console.log(newN, [...prevPs, prevN]);
            return newN;
        });
    }

    return (
        <>
            {ps.map((p, index) => <MyP key={index} index={p}/>)}
            <button onClick={handleClick}>
                Нажми меня!
            </button>
        </>
    );
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<MyApp />)

额外说明：React列表渲染需为每个子元素添加唯一key属性，这里临时使用map的索引作为key（若后续ps数组无排序/删除操作可使用，否则建议用业务唯一标识）。

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