React useContext Hook使用优化求助：跨组件传参报错问题

你报错的核心问题是Context的Provider没有正确传递value值，且中间组件仍在冗余传递props，没真正用上Context的能力。下面是完整的修正方案：

第一步：正确创建Context文件 #

先在ConstContext.js里初始化Context，给默认值避免未包裹Provider时出现报错：

import { createContext } from 'react';

// 初始化Context，给空函数当默认值兜底
const ConstContext = createContext({
  deleteCostHandler: () => {}
});

export default ConstContext;

第二步：修正App.js的Provider用法 #

你之前错误地把value传给了<Cost>组件，正确做法是把共享数据传给ConstContext.Provider，让它包裹所有需要访问该Context的组件：

import { useState } from 'react';
import ConstContext from './ConstContext';
import Cost from './Cost';

function App() {
  const [costs, setCosts] = useState(null);
  
  const deleteCostHandler = (itemId) => {
    setCosts((prevCosts) => prevCosts.filter(cost => cost.id !== itemId));
  };

  return (
    // 关键：将共享方法放入Provider的value中
    <ConstContext.Provider value={{ deleteCostHandler }}>
      <Cost /> {/* 无需再传dataDelete props */}
    </ConstContext.Provider>
  );
}

export default App;

第三步：简化中间组件，移除冗余props传递 #

Cost.js #

删掉无用的costDeleteHandler，不再往下传递删除方法：

import CostList from './CostList';

function Cost() {
  return <CostList />;
}

export default Cost;

CostList.js #

同样移除costDelete props传递，只保留必要的业务数据（比如costs）：

import CostItem from './CostItem';

function CostList({ costs }) {
  return (
    <div>
      {costs.map(cost => (
        <CostItem 
          key={cost.id} 
          id={cost.id} 
          clearInputs={/* 若该方法也需跨组件，可直接放入Context */} 
        />
      ))}
    </div>
  );
}

export default CostList;

第四步：在CostItem中直接使用useContext获取方法 #

现在可以直接调用Context里的deleteCostHandler，无需再通过多层props传递：

import { useContext } from 'react';
import ConstContext from './ConstContext';

function CostItem({ id, clearInputs }) {
  const ctx = useContext(ConstContext);

  const onDeleteHandler = () => {
    fetch(`http://localhost:8000/costs/${id}`, {
      method: "DELETE",
    }).then(() => {
      ctx.deleteCostHandler(id); // 直接调用Context中的方法
      clearInputs(true);
    });
  };

  return <button type="button" onClick={onDeleteHandler}>删除</button>;
}

export default CostItem;

额外提示 #

• 如果clearInputs也需要跨组件共享，直接把它加入Context的value对象即可，无需单独传props
• 初始化Context时设置默认值是必要的，能避免组件在未被Provider包裹时出现报错
• 中间组件（Cost、CostList）不再需要承担传递props的职责，代码会更简洁易维护

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