Obtengo la función getSingleProduct del contexto. y pasando la identificación de los artículos. Esto devuelve una matriz de 1 objeto. Ahora quiero pasar este elemento a this.state.singleItem arriba, pero aparece este error. También he intentado almacenar estos datos en context.js's this.state pero el mismo error. Si creo la función anterior y ejecuto este código. dice que el contexto no está definido.
export default withRouter( class Details extends Component { constructor(props) { super(props); this.state = { id: this.props.router.params.id, singleItem: [], // I want to store item here }; //this.getItem(); } static contextType = ProductContext; getItem = (item) => { if (this.state.singleItem.length === 0 && this.context) { this.setState(() => { return { singleItem: item, }; }); console.log("executed?"); } }; render() { const { getSingleProduct } = this.context; const item = getSingleProduct(this.state.id); if (this.state.singleItem.length === 0) { this.getItem(item); } console.log(this.state.singleItem); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>No me parece correcto usar estos métodos directamente en el método de render , ya que está invocando un this.setState . Entonces, probablemente ese sea tu problema (difícil de decir sin un codeandbox).
Entonces, lo que podría intentar es envolver todo ese código de manejo de estado y colocarlo dentro de una llamada componentDidMount o componentDidUpdate , ya que corresponde con el ciclo de vida de reacción para los componentes de clase.
Entonces terminaría siendo algo como esto:
constructor(props) { super(props); this.state = { id: this.props.router.params.id, singleItem: [], // I want to store item here }; /* Binding function to be able to handle state modifications from there */ this.getItem = this.getItem.bind(this); } componentDidMount() { const { getSingleProduct } = this.context; const item = getSingleProduct(this.state.id); /* No need to validate this.state length because this method is called only before the first render */ this.getItem(item); }Para obtener más información sobre el ciclo de vida de los componentes de clase, puede consultar este enlace .