ReactJS Context API无法传递数据问题求助

你的代码存在几个关键问题，导致Context API无法正常传递数据，以下是逐一修正的步骤：

1. 正确使用自定义Context Provider #

你已经封装了ElementContextProvider组件，但在App.js中直接使用了基础的ElementContext.Provider，既没有传入正确的value值，也未利用好封装好的Provider组件。

修改后的App.js：

import React from 'react';
import './App.css';
import HomePage from './components/HomePage'
import { ElementContextProvider } from './ElementContext';

function App() {
  return (
    <ElementContextProvider>
      <HomePage />
    </ElementContextProvider>
  );
}

export default App;

2. 修正Context内的状态更新与Provider结构 #

你的newElement函数错误地将数组类型的elements状态改为字符串，同时Provider组件没有接收并渲染子组件，导致嵌套组件无法获取Context。

修改后的ElementContext.js：

import React, { createContext, useState } from 'react';

export const ElementContext = createContext();

export const ElementContextProvider = ({ children }) => {
    const [elements, setElements] = useState([]);

    // 保持状态为数组类型，添加新元素
    const newElement = () =>{
        setElements(prevElements => [...prevElements, { id: Date.now(), type: 'Todobox', title: '新列表' }]);
    };

    const value = {
        elements,
        setElements,
        newElement
    };

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

export default ElementContext;

3. 正确从Context中提取方法 #

HomePage中使用useContext时直接获取了整个Context对象，而非单独的newElement方法，需要通过解构提取目标方法。

修改后的HomePage.jsx：

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

export default function HomePage(){
    const { 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'>
                {/* 后续可遍历elements数组渲染Todobox组件 */}
            </div>
        </div>
    )
}

额外优化提示 #

• 若要渲染新增的列表，可在HomePage的element-field中添加遍历逻辑：

  {elements.map(item => (
      <Todobox key={item.id} {...item} />
  ))}
  

• 确保React相关导入首字母大写，避免语法错误。

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