无法在 componentDidMount 中使用来自父组件的道具

Question

I'm trying to send props from parent component to child component. I want to use this in componentDidMount() at child component. But it can't get this value. It can get this in render() although.

parent component code:

class Parent extends Component {
  componentDidMount() {
    const { id } = this.props.match.params;
    // fetch with redux
    this.props.fetchItem(id);
  }

  renderItem() {
    const { item } = this.props;
    console.log("item", item);
    // item exists
    return <Child item={item} />
  }

  render() {
    return (
      <div>
       {this.renderItem()}
      </div>
    )
  }
}

child component code:

class Child extends Component {
  componentDidMount() {
    const { item } = this.props;
    console.log("item", item);
    // item doesn't exist
  }

  render() {
    console.log("item", item)
    // item exists
    return (
      <p>{item.name}</p>
    )
  }
}

Answer 1

If you want to pass props to a child component, this is how you would do it.

import MyChildComponent from './itspath'; // import your child component

class Whatever extends React.Component {
    const name = "Bob";      // Pay attention this variable we will pass as props

    <MyChildComponent name={name} />   // Here name is now a prop
}
export default Whatever;

Now to use the props. You do not need a class to use the props, but since that is what you were trying.

class MyChildComponents extends React.Component {
   componentDidMount() {
  const propsSent  = this.props.name;
  console.log(propsSent);     // This will get you the prop name with a value of Bob
}
}