ReactJS - передавая состояние компонентам, оно пустое в конструкторе

Question

Я пытаюсь передать состояние как реквизит дочернему компоненту, и когда состояние передается, реквизиты внутри конструктора и componentDidMount дочернего компонента пусты.Но внутри метода рендеринга реквизиты не пусты

Мой родительский компонент: Project

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import NewTask from '../../../TaskList/NewTask/NewTask';
import Tasks from '../../../TaskList/Tasks/Tasks';
import './Project.css';

class Project extends Component {
    constructor(props) {
        super(props);
        console.log("props received = " + JSON.stringify(props));
        this.state = {
            project: {}
        };
    }

    componentDidMount() {
        const { match: { params } } = this.props;

        fetch(`/dashboard/project/${params.id}`)
            .then(response => {
                return response.json()
            }).then(project => {
                this.setState({
                    project: project
                })
                console.log(project.tasks)
            })
    }


    render() {
        return (
            <div>
                <section className='Project container'>
                    <NewTask projectId={this.state.project._id} />
                    <br />
                    <h4>Coming Soon ...</h4>
                    <Tasks projectId={this.state.project._id} />
                </section>
            </div>
        );
    }
  }

export default Project;

Например, в этом компоненте реквизиты отображаются правильно, но вконструктор и в componentDidMount () пусты.

Мой дочерний компонент: Задачи

  import React, { Component } from 'react';
  import { NavLink } from 'react-router-dom';
import './Tasks.css';

    class Tasks extends Component {
        constructor(props) {
            super(props);
            // There are empty
            console.log(JSON.stringify(props.projectId));
            this.state = {
                projectId: props._id,
                tasks: []
            };
        }

        componentDidMount() {
            // These are empty too ...
            console.log(JSON.stringify(this.props));    
        }

        render() {
            return (
                <div>
                    // These aren't empty
                    {this.props.projectId}
                </div>
            );

        }
    }

    export default Tasks;

Answer 1

Самый простой способ исправить это - добавить условие в компонент Project:

{this.state.project &&
  this.state.project._id &&
  <Tasks projectId={this.state.project._id} />
}

Другой способ - сделать это в компоненте Task:

constructor(props) {
    super(props);
    this.state = {
        projectId: props._id,
        tasks: []
    };
}

componentDidUpdate(prevProps, prevState, snapshot) {
  // compare this.props and prevProps
  if (this.props !== prevProps) {
      this.setState({
          projectId: this.props._id
      });
  }
}

render() {
    return (
        <div>
            {this.state.projectId}
        </div>
    );
}