使用Axios客户端向子组件传递数据时出现错误

Question

我试图将数据传递给子组件并呈现它，但得到一个错误。

import axios from 'axios';
import React from 'react';
import MovieCard from './MovieCard';
import { useState, useEffect } from 'react';
const Movies = () => {
let [data, setData] = useState({ data: [] });
useEffect(() => {
const fetchData = async () => {
const result = await axios('https://ghibliapi.herokuapp.com/films');
setData(result.data);
};
fetchData();
}, []);
console.log(data);
//   return <MovieCard data={data} />;
return (
<div>
{data.data.map((item) => {
return <MovieCard key={item.id} data={data} />;
})}
</div>
);
};
export default Movies;

这是子组件

import React from 'react';
const MovieCard = (props) => {
const { id, title, description, people } = props;
console.log(props);
return (
<div>
<h1>{title}</h1>
</div>
);
};
export default MovieCard;

我尝试通过data.map()或data.data.map()进行映射，但我无论如何都会得到错误。

我如何传递数据?

Answer 1

你应该这样写:

import axios from 'axios';
import React from 'react';
import MovieCard from './MovieCard';
import { useState, useEffect } from 'react';
const Movies = () => {
let [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await axios('https://ghibliapi.herokuapp.com/films');

if(result && result.data){
setData(result.data);
}
};
fetchData();
}, []);
console.log(data)
//   return <MovieCard data={data} />;
return (
<div>
{data.map((item) => {
return <MovieCard key={item.id} title={item.title} />;
})}
</div>
);
};
export default Movies;