Question

import React from "react";
import styles from "../articles.css";

const TeamInfo = props => (
  <div className={styles.articleTeamHeader}>
    <div className={styles.left}>
      style={{
        background: `url('/images/teams/${props.team.logo}')`
      }}
    </div>
    <div className={styles.right}>
      <div>
        <span>
          {props.team.city} {props.team.name}
        </span>
      </div>
      <div>
        <strong>
          W{props.team.stats[0].wins}-L{props.team.stats[0].defeats}
        </strong>
      </div>
    </div>
  </div>
);

export default TeamInfo;

呈现此代码的代码

import React from 'react';
import TeamInfo from '../../Elements/TeamInfo';

const header = (props) => {

    const teaminfofunc = (team) => {
        return team ? (
            <TeamInfo team={team}/>
        ) : null
    }

    return (
        <div>
            {teaminfofunc(props.teamdata)}
        </div>
    )
}

export default header;

我收到错误TypeError：第8行中的props为何未定义？

第8行是

背景：url('/images/teams/${props.team.logo}')

更新：

我发现在index.js中，componentWillMount正确地带来了数据，但是在render()中，这些数据（文章和团队）没有传递给渲染，知道为什么吗？

import React, {Component} from 'react';
import axios from 'axios';
import {URL} from "../../../../config";

import styles from '../../articles.css';

import Header from './header';
import Body from './body';

class NewsArticles extends Component {

    state = {
        article:[],
        team: []
    }

    componentWillMount() {
        axios.get(`${URL}/articles?id=${this.props.match.params.id}`)
            .then(response => {
                let article = response.data[0];

                axios.get(`${URL}/teams?id=${article.team}`)
                    .then(response => {
                        this.props.setState({
                            article,
                            team:response.data
                        })
                    })

            })
    }

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

        return (
            <div className={styles.articleWrapper}>
                <Header teamdata={team[0]} date={article.date} author={article.author} />
                <Body />

            </div>
        )
    }
}

export default NewsArticles;

Answer 1

在AJAX调用完成之前很久就立即渲染组件，并将其传递给空数组的第一个元素：

<Header teamdata={team[0]}

componentWillMount不会阻止渲染。在您的渲染功能中，如果没有团队可以渲染，请短路。

render() {
    const { article, team, } = this.state;

    if(!team || !team.length) {
        // You can return a loading indicator, or null here to show nothing
        return (<div>loading</div>);
    }

    return (
        <div className={styles.articleWrapper}>
            <Header teamdata={team[0]} date={article.date} author={article.author} />
            <Body />

        </div>
    )
}

您还正在调用this.props.setState，这可能是错误的，并且永远不要在React的其他组件上调用setState。您可能需要this.setState

Answer 2

如果组件在没有数据的情况下进行渲染，则应始终选通任何对象遍历。

{props && props.team && props.team.logo ? <div className={styles.left}>
  style={{
    background: `url('/images/teams/${props.team.logo}')`
  }}
</div> : null}

这可能不是您的确切问题，但是在不知道如何渲染道具的情况下，这是我们可以从代码这一方面完成的全部工作。

根据您的修改进行更新。您无法确定props.teamdata是否存在，因此将在没有此数据的情况下呈现您的组件。您还需要对这一方面进行门操作，也不需要将其作为功能分开。这是一个看起来像的例子：

import React from 'react';
import TeamInfo from '../../Elements/TeamInfo';

const header = (props) => (
    <div>
        {props.teamdata ? <TeamInfo team={props.teamdata}/> : null}
    </div>
)

export default header;

Answer 3

首先-尽管这是风格上的-将props直接传递给您的功能组件不是一种好习惯。改为这样做。

const TeamInfo = ({team}) => (
    <div className={styles.articleTeamHeader}>
        <div className={styles.left}>
            style={{
                background: `url('/images/teams/${team.logo}')`
            }}
        </div>
        <div className={styles.right}>
            <div>
                <span>
                    {team.city} {team.name}
                </span>
            </div>
            <div>
                <strong>
                    W{team.stats[0].wins}-L{team.stats[0].defeats}
                </strong>
            </div>
          </div>
    </div>
);

第二，您可能只想进行某种null检查。如果team是undefined第一次尝试渲染组件，则可能只想渲染null，这样就不会浪费周期。

万一这不是问题，可以通过console.log放置道具来学到很多东西，以便每次组件尝试渲染时都知道所有内容。如果您处于即将解决的状态，则数据为undefined没关系。

为什么我无法获得道具？

3 个答案: