为什么将未定义的反应道具传递给子组件？

Question

我已经从 db 获取了一些数据，当我用控制台记录它们时效果很好。而且当我 stringfy 时，传递的道具是好的，并按预期显示在屏幕上。

import axios from 'axios'
import { URL } from '../../../../config'
import Header from './header'

class NewArticle extends Component {
    state = {
        article: [],
        team: []
    }
    componentWillMount() {
        axios.get(`${ URL }/articles?id=${ this.props.match.params.id }`)
        .then( res => {
            let article = res.data[ 0 ]
            console.log( res.data[ 0 ] )
            //{
                //     author: "John Secada",
                //     date: "10/12/2018",
            // }           
            axios.get( `${ URL }/teams?id=${ article.team }` )
            .then( res => {
                this.setState({
                    article,
                    team: res.data[0]
                })
                console.log( res.data[0] )
                // {
                //     id: 3,
                //     logo: "nets.png",
                //     name: "Nets",
                //     poll: "false",
                //     stats: {wins: 23, defeats: 12}
                // }
            } )
        } )
    }
    render(){
        let article = this.state.article
        let team = this.state.team
        return(
            <div>
                 <Header
                    teamData={ team }
                    date={ article.date }
                    author={ article.author }
                    />
                { JSON.stringify(article,team) }
            </div>
        )
    }
}
export default NewArticle

接收 props 的 Header 组件：

import React from 'react'
const Header = props => {
    return (
        <div>    
            { console.log( props) }
            {/* {teamData: Array(0), date: undefined, author: undefined} */}    
        </div>
    )
}
export default Header

那么当我将它们作为 props 传递给 Header 组件时，为什么它们是未定义的？

Answer 1

因为您有异步请求并且在挂载 Header 时您还没有此数据。

试试这个：

   render(){
        const article = this.state.article
        const team = this.state.team

        if(!article && !article.date && !article.author) {
          return null;
        }

        if(!team) {
          return null;
        }

        return(
            <div>
                 <Header
                    teamData={ team }
                    date={ article.date }
                    author={ article.author }
                    />
                { JSON.stringify(article,team) }
            </div>
        )
    }

Answer 2

在 componentWillMount 中，您正在使用 axios，其中 returns 是一个承诺并且是异步的。问题是您在从 API 获取数据之前渲染 <Header/>。为避免这种情况，您可以像这样更新 render 函数。

function render() {
 let article = this.state.article;
 let team = this.state.team;
 return (
  <div>
   {team.length ? (
    <Header teamData={team} date={article.date} author={article.author} />
    ) : (
    'Loading Data...'
   )}
  {JSON.stringify(article, team)}
  </div>
);
}

Answer 3

首先，的回答是正确的

这是处理条件渲染的更智能和推荐的方法。

您可以使用高阶组件来处理 reactjs 中的条件渲染。

更多详情：Higher Order Components with Conditional Rendering in React.

为什么将未定义的反应道具传递给子组件？

why react props are passed undefined to the child component?

javascript

reactjs

react-props