React中使用Context API实现兄弟组件传值失败问题求助

嘿，我一眼就看出问题所在啦！你把NumberContext.Provider放在了<TheButton>组件内部，可<Display>组件和<TheButton>是兄弟关系，它根本不在这个Provider的包裹范围内，自然获取不到你传递的test值啦。

React Context的核心逻辑是：只有被Provider直接或间接包裹的组件（也就是Provider的子组件/后代组件），才能通过useContext拿到Provider提供的值。你的<Display>组件在<App>下面，和<TheButton>平级，完全没被Provider覆盖到，所以拿到的是Context的默认值（这里因为创建Context时没传默认值，所以是undefined）。

修复后的完整代码 #

把Provider移到父组件<App>里，让两个兄弟组件都处于Provider的包裹之下：

import React from "react";
import ReactDOM from "react-dom";

export const NumberContext = React.createContext();

function App() {
  return (
    <NumberContext.Provider value={"test"}>
      <div>
        <TheButton />
        <Display />
      </div>
    </NumberContext.Provider>
  );
}

function TheButton() {
  return <button>Click me</button>;
}

function Display() {
  const context = React.useContext(NumberContext);
  return <div>The answer {context}.</div>;
}

ReactDOM.render(<App />, document.querySelector("#root"));

这样修改后，<Display>就能正常拿到test值，页面会显示The answer test.啦。

小提示：以后使用Context时，记得把Provider放在需要访问该Context的所有组件的共同父组件上，确保所有目标组件都在Provider的层级范围内哦～

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