Gatsby - Обновление контекстных данных при загрузке страницы

Question

Я использую плагин макета Gatsby и хочу обновить состояние в провайдере контекста на странице, которая отображается в данный момент. Я могу заставить его обновляться по нажатию кнопки, как показано в этом коде:

import ContextConsumer from "../components/Context.js"

class Portfolio extends React.Component {
  constructor (props){
    super(props)
    this.state = {
      page: "portfolio"
    }
  }
  render(){
    return (
      <React.Fragment>
        <ContextConsumer>
          {({ data, set }) => (   
            <button onClick={() => set({curPage:this.state.page})}>Click</button>
          )}
        </ContextConsumer>
        <h1>This is the portfolio page</h1>
      </React.Fragment>
    )
  }
}

Однако я хочу, чтобы контекст обновлялся при загрузке страницы. Я попытался использовать функцию мгновенного вызова стрелки, но это вызывает ошибку «Превышена максимальная глубина обновления».

Обновление 10.2: Это все еще сбивает меня с толку. Я могу успешно обновить и прочитать контекст одним нажатием кнопки, но все равно не могу заставить его работать при загрузке страницы или из метода жизненного цикла. Если вы посмотрите на эту песочницу, вы поймете, что я имею в виду: codesandbox.io / s / thirsty-frog-ocnzl . Нажатие на страницу о программе работает нормально; если затем нажать «чейнджер», он обновится и успешно прочитает новое состояние из контекста. Тем не менее, если вы перейдете на страницу портфолио, где я пытаюсь обновиться при первом рендере, он выдаст кучу ошибок. Еще раз спасибо за любую помощь.

Answer 1

В интересах всех, кто борется с этим, я нашел одно решение, заключающееся в том, чтобы заключить ваш компонент в компонент более высокого порядка и передать контекстные данные в качестве реквизита. Вот пример:

//This is the original component
class Portfolio extends React.Component {

  constructor(props) {
    super(props)

  }

  componentDidMount() { 
    this.props.set({ curPage: "portfolio" })  
  }

  render(){
    return(
      <h1>This is the {this.props.data.curPage} page</h1>
    );
  }
}

//...and this is the component that wraps it to pass in context data as a prop.
const PortfolioWrap = () => (
  <ContextConsumer>
    {({ data, set }) => (
      <Portfolio data={data} set={set}/>
    )}
  </ContextConsumer>
)