React Context Provider无法传递数据问题求助

核心问题 #

Header组件始终只能拿到totalAmount的默认值0，是因为它不在AuthContext.Provider的包裹范围内。当前Restaurant组件的Provider仅包裹了DaftarMenu组件，Header在Provider外部，无法感知Provider内部totalAmount的更新。

修复步骤 #

1. 调整组件层级，将Header纳入Provider包裹范围 #

修改Restaurant组件的返回结构，把Header放到Provider内部：

// Restaurant.js
import Header from './components/Header'; // 先导入Header组件

// ... 其余代码保持不变

return(
  <AuthContext.Provider
    value={{
      totalAmount: totalAmount,
    }}
  >
    <Header /> {/* 将Header移入Provider内部 */}
    <DaftarMenu items={daftarMenu} amountInput={onSaveAmountInput} nameInput={onSaveNameInput} />
  </AuthContext.Provider>
);

如果Header是在更高层级（比如App.js）渲染的，需要将Provider提升到App.js层级：

// App.js
import React from 'react';
import Restaurant from './Restaurant';
import Header from './components/Header';
import AuthContext from './components/Context/AuthContext';

function App() {
  return (
    <AuthContext.Provider value={{ totalAmount: ... }}> 
      {/* 若需要，可将totalAmount状态提升到此处统一管理 */}
      <Header />
      <Restaurant />
    </AuthContext.Provider>
  );
}

export default App;

注：若选择将状态提升到App.js，需同步迁移Restaurant内totalAmount的相关更新逻辑，确保Provider能获取到最新值。

2. 修复setTotalAmount的闭包问题 #

当前onChangeMenu中更新totalAmount的写法依赖旧值，可能导致更新不及时，建议改用函数式更新：

const onChangeMenu = (name) => { 
  // 函数式更新获取最新的totalAmount值
  setTotalAmount(prevTotal => prevTotal + parseInt(inputAmount));
  const updatedMenu = daftarMenu.map(obj => {
    if (obj.name === name) {
      return {...obj, amount: obj.amount + parseInt(inputAmount)};
    }
    return obj;
  });
  setDaftarMenu(updatedMenu);
};

3. 验证效果 #

完成修改后，当totalAmount更新时，Provider会自动将新值传递给内部的Header组件，控制台即可打印出更新后的数值。

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