Я пытаюсь вызвать функцию из контекста функции componentDidMount, но получаю свойство Cannot read свойства undefined error

Question

Я пытаюсь вызвать функцию начальных данных для настройки состояния в контексте.Это должно установить состояние контекста с объектом MetaDataData.json из компонента с некоторыми начальными значениями для тестирования.В настоящее время он дает мне ошибку:

Uncaught TypeError: Cannot read property 'initialDataLoad' of undefined

Я не совсем уверен, что является причиной этого, и любая помощь будет оценена.

MetaDateContainer.js

import React from 'react'
//This is a json file with some dummy data in it for testing
import MetaDataData from '../../metaData'

class MetaDataContainer extends React.Component {
  componentDidMount() {
    this.props.context.initialDataLoad(MetaDataData)
  }
}

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

MetaDataContainer.contextType = ProductInfoContext

export default MetaDataContainer

ProductInfoContext.JS

import React from "react";

const ProductInfoContext = React.createContext();

export default ProductInfoContext;

ProductInfoProvider.js

import React from "react";
import ProductInfoContext from './ProductInfoContext';

class ProductInfoProvider extends React.Component {

  state = {
    metaData: {}

  };

  initialDataLoad = (initialData) => {
    console.log(this.state)
    this.setState({metaData: initialData})
  }
  };

  render() {
    return (
      <ProductInfoContext.Provider value={{
        state: this.state,
      }}>
        {this.props.children}
      </ProductInfoContext.Provider>
    )
  }
}

export default ProductInfoProvider;

Answer 1

Вам не нужно обращаться к контексту из props, вместо этого прямо как this.context.initialDataLoad(MetaDataData)

class MetaDataContainer extends React.Component {
  componentDidMount() {
    this.context.initialDataLoad(MetaDataData)
  }
}

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

Answer 2

Обычно поставщик устанавливает значение, а потребитель использует это значение.Вы пытаетесь установить значение в потреблении MetaDataContainer.js, вызывая функцию initialDataLoad в контексте, но этот метод отсутствует в контексте, поэтому возникает ошибка.

В идеале вы должны установить начальное значение в ProductInfoProvider, может потреблятьФайл MetaData.json.

Работает Ссылка CodeSandbox

Надеюсь, это поможет !!!