使用 React.createContext 將數據從父組件 state 傳遞到子組件

Question

I have a component that contains a state, and I will pass the state data into another component, I use a static contextType to throw the state data but the data does not reach the intended component, what do you think this is wrong? 謝謝你

這是我的父組件

export const MyContext = React.createContext();

export class MerchantByPromo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataPromo: [],
      loading: true
    };
  }

  async componentDidMount() {
    const merchant_id = this.props.match.params.id_merchant
    await Api.post('language/promo-voucher-by-merchant', { MERCHANT_ID: merchant_id })
      .then((response) => {
        if (response.data.STATUS_CODE === '200') {
          this.setState({
            dataPromo: response.data.DATA,
            loading: false
          });
        }
      })
  }

這是我的子組件

import React, { Component } from 'react'
import { MyContext } from './MerchantByPromo'

export class MerchantByPromoDetail extends Component {
  constructor(props){
    super(props)
    this.state = {
      detailPromo:[],
    }
  }

  UNSAFE_componentWillMount(){
    let value = this.context
    console.log(value)
  }

  componentDidMount(){

  }

  render() {
    return (
      <MyContext.Consumer>
        <p>tes</p>
      </MyContext.Consumer>
    )
  }
}

我總是收到這樣的錯誤消息“TypeError：render is not a function”，解決辦法是什么？

Answer 1

  <MyContext.Consumer>
    {() => <p>tes</p>}
  </MyContext.Consumer>

更改為此並檢查