React中如何从数组提取指定数据？boxid无法渲染求助

你的代码存在三个核心问题，导致textarea的placeholder无法显示正确的boxid，以下是具体修复步骤：

问题1：状态更新异步导致ID赋值错误 #

React的useState更新是异步的，你之前在newElement中先调用newElementId更新elementId，紧接着就用旧的elementId创建元素，导致新元素的boxid始终是更新前的旧值。

问题2：组件未接收对应元素数据 #

HomePage中渲染Todobox时，没有把当前遍历到的单个元素传递给组件，反而在Todobox中尝试访问数组elements的boxid属性（数组本身没有这个属性，结果为undefined）。

问题3：变量命名冲突 #

elements.map((elements, elementId) => ...)中，第一个参数是数组的单个元素，却命名为elements，和外层数组变量重名，导致变量覆盖。

修改后的代码 #

ElementContext.js

import React, { createContext, useState } from 'react';
import Todobox from './components/Todobox';

export const ElementContext = createContext();

export const ElementContextProvider = ({children}) => {
    const [elements, setElements] = useState([]);
    const [elementId, setElementId] = useState(0);
    const [refDict, setRefDict] = useState({});

    const newElement = () => {
        // 用函数式更新获取最新ID，避免异步问题
        setElementId(prevId => {
            const newId = prevId + 1;
            if (!refDict[newId]) {
                setElements(prev => [...prev, { title: 'Placeholder', boxid: newId }]);
                setRefDict(prev => ({...prev, [newId]: true}));
            }
            return newId;
        });
    };

    const value = {
        elements,
        setElements,
        newElement,
        elementId
    };

    return(
        <ElementContext.Provider value={value}>
            {children}
        </ElementContext.Provider>
    )
};

HomePage.jsx

import React, { useContext } from 'react';
import '../App.css';
import Todobox from './Todobox';
import { ElementContext } from '../ElementContext';

export default function HomePage(){
    const { elements, newElement } = useContext(ElementContext);

    return(
        <div className='page-container'>
            <div className='header'>
                <a className='header-title'>Trello Clone!</a>
                <a className='header-button' onClick={newElement}>Create a list</a>
            </div>
            <div className='element-field'>
                {/* 修正命名冲突，传递单个元素给Todobox */}
                {elements.map((element) => <Todobox key={element.boxid} element={element} />)}
            </div>
        </div>
    )
}

Todobox.jsx

import React from 'react';
import Item from './Item';
import '../App.css';

// 接收props中的单个元素，无需依赖整个context数组
export default function Todobox({ element }){
    return(
        <div className='element-box'>
            <a className='element-title'>{element.title}</a>
            <Item />
            <textarea 
                className='element-input' 
                placeholder={element.boxid.toString()}
            />
        </div>
    )
}

额外说明 #

• 用element.boxid作为组件key比index更可靠，避免数组元素顺序变化时引发的渲染问题
• 显式将boxid转为字符串，符合placeholder的字符串类型要求
• 移除Todobox中不必要的Context依赖，让组件更独立，只关注自身需要的数据

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