Question

我从db获得了一些数据，当我通过控制台记录它们时，它的工作效果很好。以及当我穿线时，传递的道具都可以，并按预期显示在屏幕上。

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

用于接收道具的Header组件：

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

因为您有一个异步请求，并且在安装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 ，它返回一个promise，并且是异步的。问题是您正在从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

首先，@Evghenii的答案是正确的。

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

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

有关更多详细信息：Higher Order Components with Conditional Rendering in React。

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

3 个答案: