Question

我正在尝试使用React Context API传递道具，但是我遇到了“未定义”错误。 react的版本是16.3.2，react-dom版本是16.3.2。以下是我的代码：

Provider.jsx：

import React from 'react';

export const PathContext = React.createContext({
  rootPath: "http://localhost/example"
});

App.jsx：

import React from 'react';
import {PathContext} from './Provider.jsx';

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <div>
        <PathContext.Provider>
          <AppRootPath />
        </PathContext.Provider>
      </div>
    )
  }
}

class AppRootPath extends React.Component {
  render() {
    return(
      <div>
        <span>App Root Path</span><br />
        <PathContext.Consumer>
          {
            ({rootPath}) => <span>{rootPath}</span>
          }
        </PathContext.Consumer>
      </div>
    )
  }
}
export default App;

我在这里找不到任何问题，但是控制台报告了此错误：TypeError: Cannot read property 'rootPath' of undefined，错误发生在此处：({rootPath}) => <span>{rootPath}</span>

Answer 1

关于使用default value：

如果上面的上下文没有提供程序，则为value参数将等于传递给createContext（）的defaultValue。

但是你用Provider包装它。尝试删除提供商：

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <div>
        <AppRootPath />
      </div>
    )
  }
}

class AppRootPath extends React.Component {
  render() {
    return(
      <div>
        <span>App Root Path</span><br />
        <PathContext.Consumer>
          {
            ({rootPath}) => <span>{rootPath}</span>
          }
        </PathContext.Consumer>
      </div>
    )
  }
}

React Context消费者无法找到道具

1 个答案: