почему реагирующие реквизиты передаются неопределенным дочернему компоненту?

Question

У меня есть некоторые данные из базы данных, когда я их консоль регистрирую, это работает хорошо. а также когда я проверяю, переданные реквизиты в порядке и отображаются на экране, как и ожидалось.

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

Компонент заголовка, который получает реквизит:

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

Так почему же они не определены, когда я передаю их как реквизиты компоненту Header?

Answer 1

Поскольку у вас есть асинхронный запрос и когда монтируется заголовок, у вас еще нет этих данных.

Попробуйте это:

   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 , который возвращает обещание и является асинхронным.Проблема в том, что вы визуализируете <Header/> до того, как данные извлекаются из API.Чтобы избежать этого, вы можете обновить функцию 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

Прежде всего, @ Евгений ответ правильный.

Вот более умный и рекомендуемый подход для обработки условного рендеринга.

Вы можете использовать компоненты высшего порядка для обработки условного рендеринга в реагир.

Для более подробной информации: Компоненты высшего порядка с условным рендерингом в действии .