Question

我试图调用初始数据函数以在Context中设置状态。这应该使用带有一些初始值的组件中的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

通常是提供者来设置值，而消费者使用该值。您正在尝试通过在上下文上调用MetaDataContainer.js函数来设置消耗initialDataLoad的值，但是此方法在上下文中不存在，因此会出错。

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

工作CodeSandbox link

希望有帮助！

我正在尝试从componentDidMount函数中的上下文调用函数，但是我得到了未定义错误的无法读取属性

2 个答案: