#javascript #reactjs #database #axios #antd
#javascript #reactjs #База данных #axios #antd
Вопрос:
Я собираю информацию об 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/198x264amp;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/198x264amp;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;
Ответ №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(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}
/>