ReactJS—将状态传递给组件it’；构造函数中为空

我试图将状态作为prop传递给子组件，当传递状态时，子组件的构造函数和componentDidMount中的prop为空。但是在渲染方法中，道具不是空的

我的父组件：项目

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;

import React，{Component}来自'React'；
从'react router dom'导入{NavLink}；
从“../../../TaskList/NewTask/NewTask”导入新任务；
从“../../../TaskList/Tasks/Tasks”导入任务；
导入“/Project.css”；
类项目扩展组件{
建造师（道具）{
超级（道具）；
console.log（“props received=“+JSON.stringify（props））；
此.state={
项目：{}
};
}
componentDidMount（）{
const{match:{params}}=this.props；
获取（`/dashboard/project/${params.id}`）
。然后（响应=>{
返回response.json（）
})。然后（项目=>{
这是我的国家({
项目：项目
})
console.log（project.tasks）
})
}
render（）{
返回(


马上就来。。。
);
}
}
导出默认项目；

例如，在此组件中，正确呈现了道具，但构造函数和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;

import React，{Component}来自'React'；
从'react router dom'导入{NavLink}；
导入“/Tasks.css”；
类任务扩展组件{
建造师（道具）{
超级（道具）；
//有空的
log（JSON.stringify（props.projectId））；
此.state={
项目D：道具，
任务：[]
};
}
componentDidMount（）{
//这些也是空的。。。
log（JSON.stringify（this.props））；
}
render（）{
返回(
//这些不是空的
{this.props.projectId}
);
}
}
导出默认任务；

解决此问题的最简单方法是向项目组件添加一个条件：

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

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>
    );
}

{this.state.project&&
此.state.project.\u id&&
}

另一种方法是在任务组件中执行此操作：

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

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>
    );
}

构造函数（道具）{
超级（道具）；
此.state={
项目D：道具，
任务：[]
};
}
componentDidUpdate（prevProps、prevState、快照）{
//比较this.props和prevProps
如果（this.props！==prevProps）{
这是我的国家({
Projectd:这是道具
});
}
}
render（）{
返回(
{this.state.projectId}
);
}
最低限度，您可能只想在项目从FETCH加载时考虑有条件地呈现任务或类似组件。现在，在一段时间内，您将传递一个未定义的projectId prop值，直到fetch解析并执行setState。此外，如果提取失败，因为没有catch（）或回退，这将至少有帮助。第一个成功了！！谢谢D这对我来说很有意义，但我是ReactJS的新手，我仍在努力理解一些事情。为什么我要加上那个条件？谢谢你的帮助别担心！！组件只有通过条件才能被渲染。因此，您基本上是告诉React显示this.state.project和this.state.project.\u id是否有价值。有意义！非常感谢。