javascript - 无法获取数据库信息以显示到我的网页

Question

我正在收集 API 信息并在不同的 .js 页面中将其显示到我的网页上，然后它将该信息存储到数据库中。我现在想从数据库中检索保存的 API 信息并将其显示在不同的页面中。我在使用 data.map 函数时遇到问题，我不确定我是否正确使用它。如果没有 data.map 函数，我可以在控制台中看到预期的数据库电影信息，但我无法让它以电影卡的形式显示到网页上，如下所示。我在传递信息的方式上也找不到任何明显的代码错误（因为我可以看到它正确显示到控制台）。

            import React, { useEffect, useState } from 'react';
            import { Layout, Row, Col, Card, Tag, Spin, Modal, Typography, Button } from 'antd';
            import { Link } from "react-router-dom";
            import axios from 'axios';
            import 'antd/dist/antd.css';

            const { Content } = Layout;
            const { Meta } = Card;
            const TextTitle = Typography.title;

            const MovieCard = ({title, poster_url, ShowDetails, DetailRequest, ActivateModal}) => {

                const clickHandler = async() => {

                    ActivateModal(true);
                    DetailRequest(true);

                    await axios.get('api/movie/' + '2' )
                    .then( res =>{
                        const movie = [res.data];
                        console.log(movie);
                            DetailRequest(false);
                            ShowDetails([res.data]);
                    })
                    .catch( err => {
                        console.log(err);
                    })

            /*Something with our database call */
                }

                return (
                    <Col style={{margin: '50px'}} span={3}>
                        <div>
                            <Card
                                style={{ width: 300 }}
                                cover={
                                    <img
                                        alt={title}
                                        src={poster_url === 'N/A' ? 'https://placehold.it/198x264&text=Image+Not+Found' : poster_url}
                                    />
                                }
                                onClick={() => clickHandler()}
                            >
                                <Meta
                                    title={title}
                                />
                            </Card>
                        </div>
                    </Col>
                )
            }

            const MovieDetail = ({title, cast, release_date, rated, duration, genre, poster_url, plot }) => {
                return (
                    <Row>
                        <Col span={11}>
                            <img 
                                src={poster_url === 'N/A' ? 'https://placehold.it/198x264&text=Image+Not+Found' : poster_url} 
                                alt={title} 
                            />
                        </Col>
                        <Col span={13}>
                            <Row >
                                <Col>
                                    <TextTitle>{title}</TextTitle>
                                </Col>
                            </Row>
                            <Row style={{marginBottom: '.7em'}}>
                                <Col>{cast}</Col>
                            </Row>
                            <Row style={{marginBottom: '.7em'}}>
                                <Col>
                                    <Tag>{release_date}</Tag>
                                    <Tag>{rated}</Tag> 
                                    <Tag>{duration}</Tag> 
                                    <Tag>{genre}</Tag>                        
                                </Col>
                            </Row>
                            <Row>
                                <Col>{plot}</Col>
                            </Row>
                        </Col>
                    </Row>
                )
            }

            const Loader = () => (
                <div>
                    <Spin />
                </div>
            )

            function Showtimes() {

                const [data, setData] = useState(true);
                const [activateModal, setActivateModal] = useState(false);
                const [details, setShowDetails] = useState(false);
                const [detailRequest, setDetailRequest] = useState(false);
                const [activateForm, setActivateForm] = useState(false);

                useEffect(async () =>{

                    await axios.get('api/movie/' + '2' )
                    .then( res =>{
                        const movie = [res.data];
                        console.log(movie);
                        setData([res.data])
                    })
                    .catch( err => {
                        console.log(err);
                    })
                }, []);
                
                return (
                    <div className="Showtimes">
                        <Layout className="layout">
                            <Content>
                                <div style={{ background: '#282c34', padding: 60, minHeight: 300 }}>
                                    <Row justify="center">
                                        { /*data.map((movie) => (
                                            <MovieCard 
                                                ShowDetails={setShowDetails} 
                                                DetailRequest={setDetailRequest}
                                                ActivateModal={setActivateModal}
                                                ActivateForm={setActivateForm}
                                                key={movie}
                                                {...movie}
                                            />
                                        ))*/}
                                    </Row>
                                </div>
                                <Modal
                                    title='Details'
                                    centered
                                    visible={activateModal}
                                    onCancel={() => setActivateModal(false)}
                                    onOk={() => setActivateForm(true)}
                                    width={800}
                                    footer={[
                                        <Button key="cancel" onClick={() => setActivateModal(false)}>
                                            Cancel
                                        </Button>,
                                        <Button key="schedule" onClick={() =>setActivateForm(true)}><Link to='/PurchaseTickets'>Purchase Tickets</Link ></Button>
                                    ]}
                                    >
                                    { detailRequest === false ?
                                        (<MovieDetail {...details} />) :
                                        (<Loader />) 
                                    }
                                </Modal>
                            </Content>
                        </Layout>
                    </div>
                );
            }

            export default Showtimes;

标签： javascriptreactjsdatabaseaxiosantd

Answer 1

首先，clickHandler 需要具备以下条件： const clickHandler = async() => {

            ActivateModal(true);
            DetailRequest(true);

            await axios.get('api/movie/' + movie_id )
            .then( res =>{
                const movie = res.data;
                console.log(movie);
                    DetailRequest(false);
                    ShowDetails(movie);
            })
            .catch( err => {
                console.log(err);
            })

        }

对于 API 调用，useEffect 应与以下内容匹配：

            useEffect(async () =>{
            await axios.get('api/movie/getAll')
            .then( res =>{
                const movies = res.data;
                console.log(movies);
                setData(movies)
            })
            .catch( err => {
                console.log(err);
            })
        }, []);

最后，MovieCard 标签应该如下所示，带有匹配属性的 Object.keys(data) 调用显示在 MovieCard 标签的底部，如下所示：

            {Object.keys(data).map((key) => (
                    <MovieCard 
                        ShowDetails={setShowDetails} 
                        DetailRequest={setDetailRequest}
                        ActivateModal={setActivateModal}
                        ActivateForm={setActivateForm}
                        key={data[key].movie_id}
                        title = {data[key].title}
                        movie_id = {data[key].movie_id}
                        poster_url = {data[key].poster_URL}
                    />