Question

图像为空，无法读取属性

2022-01-14

883

reactjs react-hooks use-effect

const url = "http://api.tvmaze.com/search/shows?q=girls";

export default function MoviesList() {
    const [movie, setMovie] = useState([]);

    useEffect( () => {
        loadData();
        }, []);
        const loadData = async () => {
            await fetch(url)
            .then(response => response.json())
            .then(data => setMovie(data))
            .catch(error => console.log(error));
        }

    function movieCard (movie) {
        return (
            <Card className="movie-card" key={movie.show.id}>
                <Card.Body>
                    <Card.Title>{movie.show.name}</Card.Title>
                    <Card.Text>{movie.show.url}
                    <Card.Img src={movie.show.image.medium} />
                    </Card.Text>
                </Card.Body>
            </Card>
        );
    }
    return (
        <>
        <h1>Movie List</h1>
        {movie.map(movieCard)}
        </>
    )
}

因此，我想做的是尝试从 API 访问图像 URL 并将其用于我的卡片组件。但是，一旦我访问它，网络就会变空白，这就是控制台上显示的内容。

有什么想法可以解决这个问题吗？提前谢谢！

Answer 1

在使用 API 进行抓取时，您需要为更大的数据结构做好准备，因为我在上面的输出中只能看到 1 个项目，所以我将尝试说明为什么事情不起作用。

在您的 setMovie 中，您将 movie 设置为全部数据。

如果我们继续使用 setMovie(data[0]) 设置 movie，我们则会保存第一个项目。

未来可能会有一些调整，但现在 movie 将可以访问 movieCard 函数中的 url 、 name 和 medium 。

问问自己，您真的需要的是 data[0] ，还是需要更改初始 fetch(url) 以获取 1 个特定项目。

根据您下面的评论，您想要显示每个项目的 movieCards。我如何做到这一点将重写 abit 并返回一个对每部电影调用 movieCard 然后返回的函数。

const [movie, setMovie] = useState([]);

我会更改为 const [movies, setMovies] = useState([]); 以表明我们可能会根据获取的内容处理多部电影。

我们还将回到您设置状态的原始方式： setMovie(data) ，因为我们现在知道您拥有其中的所有项目。

接下来我们可以做的是像这样重写您的返回值：

return (
        <>
        <h1>Movie List</h1>
        {movies.map((movie) => (
           movieCard(movie);
        )}
        </>
    )

现在将发生的是，调用 movieCard 函数后，包含所有数据的状态将迭代并为其包含的每个电影项目创建一个 movieCard，而不是返回 1 个项目。

Answer 2

渲染函数在数据到达之前运行，添加一个条件，如果数组为空，则不制作卡片

function movieCard (movie) {
    if(movie !== ''){
        return (
            <Card className="movie-card" key={movie.show.id}>
                <Card.Body>
                    <Card.Title>{movie.show.name}</Card.Title>
                    <Card.Text>{movie.show.url}
                    <Card.Img src={movie.show.image.medium} />
                    </Card.Text>
                </Card.Body>
            </Card>
        );
    }
}

另外，将数据更改为 data[0]，因为数据位于数组的第一个元素中

useEffect( () => {
        loadData();
        }, []);
        const loadData = async () => {
            await fetch(url)
            .then(response => response.json())
            .then(data => setMovie(data[0]))
            .catch(error => console.log(error));
        }