javascript - 从 api 获取的数据不会作为 props 传递给嵌套组件

Question

在我的 React 应用程序中，我有一个主应用程序组件，我在 componentDidMount 方法中从 api 获取数据并将其保存在其状态中。然后我将该状态传递给 App 中的另一个组件。但是，当我使用 prop 中的数据时，它显示未定义。另一个奇怪的情况是，当我在应用程序组件渲染方法中的 console.log 状态时，首先得到一个空数组，然后在第二个数组后得到另一个包含数据的数组。请在这里帮助我代码是这样的 -

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            data: []
        };
    }

    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
        fetch(
            `https://api.themoviedb.org/3/movie/popular?api_key=${
                process.env.REACT_APP_API_KEY
            }&language=en-US&page=1`
        )
            .then(res => res.json())
            .then(data => {
                this.setState({ data });
            })
            .catch(err => console.log(err));
    }

    render() {
        console.log(this.state.data);
        return (
            <div>
                <Movie title="Popular" results={this.state.data} />
            </div>
        );
    }
}

export default App;

this.state.data 在 Movie 组件中未定义，如下所示

function Movie(props) {
  return (
    <p>{props.data.results[0].title}</p>
  )
}

Answer 1

您正在通过results和title作为props到<Movie>组件尚未尝试获取 data Prop 。

组件:

<Movie title="Popular" results={this.state.data} />

所以你需要获取 results Prop ，而不是数据。

已修复:

function Movie(props) {
  return (
    <p>{props.results[0].title}</p>
  )
}

<小时/>

另外:

如果您已经传递了 title 属性，为什么不直接使用该属性作为标题呢？

function Movie(props) {
  return (
    <p>{props.title}</p>
  )
}