我试图从 componentDidMount 函数的上下文中调用一个函数，但我收到了 Cannot read 属性 of undefined 错误

Question

我正在尝试调用初始数据函数来设置上下文中的状态。这应该使用组件的 MetaDataData.json 对象设置 Context 的状态，并带有一些用于测试的初始值。它目前给我一个错误：

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

通常是Provider设置值，consumer使用值。您正在尝试通过在上下文中调用 initialDataLoad 函数来设置消耗 MetaDataContainer.js 的值，但此方法在上下文中不存在，因此出现错误。

理想情况下，您应该在 ProductInfoProvider 中设置初始值，可能会消耗 MetaData.json 个文件。

工作CodeSandbox link

希望对您有所帮助！！！

我试图从 componentDidMount 函数的上下文中调用一个函数，但我收到了 Cannot read 属性 of undefined 错误

I'm attempting to call a function from the context in the componentDidMount function but i'm getting a Cannot read property of undefined error

reactjs

react-context