在函数Reactjs中调用const

Question

我正在创建一个应用程序，其中显示注册到我的数据库中的人员，我对如何显示人员有一些疑问，调用函数中的const(show(：

这是我的代码

import React, {useState} from 'react'
import Axios from 'axios'
import styled from 'styled-components'
import Video from '../../Asssets/Video/Video.mp4'
import Navbar from '../../Components/Navbar/Navbar'
import { SignIn,ButtonL,ButtonR } from '../../Components/Buttons/Button/Button'
function Home() {
const [usernameShow, setUsernameShow] = useState("");
const [moneyShow, setMoneyShow] = useState("");
const [lastbidShow, setLastBidShow] = useState("");
const [natShow, setNatShow] = useState("");
Axios.defaults.withCredentials = true;
const show = () => {
Axios.post("http://localhost:3001/show", {
nationality: natShow,
username: usernameShow,
money: moneyShow,
lastbid: lastbidShow,
}).then((response) => {
console.log(response);
})
};
return (
<>
<Navbar/>
<HeroContainer>
<HeroBg>
<VideoBg src={Video} type="video/mp4" autoPlay loop muted playsInline  />
</HeroBg>
<HeroContent>
<HeroItems>
<HeroH1>Who will win?</HeroH1>
<HeroH6>  /*INSIDE HERE I WANT TO SHOW THE PEOPLE */ </HeroH6>
<div className="flexati">
<ButtonL/>
<ButtonR/>
</div>
</HeroItems>
</HeroContent>
</HeroContainer>
</>
)
}
export default Home
const HeroContainer = styled.div`
background: #0c0c0c;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
height: 103vh;
padding: 0 1rem;
position: relative;
margin-top: -80px;
:before{
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 2;
background: linear-gradient(180deg, 
rgba(0,0,0, 0.2) 0%, 
rgba(0,0,0, 0.6), 100%
),
linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 100%);
}
`
const HeroBg = styled.div`
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
`
const VideoBg = styled.video`
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
`
const HeroContent = styled.div`
z-index: 3;
height: calc(100vh -80px);
max-height: 100%;
padding: 0rem calc((100vh - 1300px) /2)
`
const HeroItems = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
max-height: 100%;
padding: 0;
color: #fff;
line-height: 1.1;
font-weight: bold;
`
const HeroH1 = styled.h1`
font-size: clamp(1.5rem, 6vw, 4rem);
margin-bottom: 1.5rem;
letter-spacing: 3px;
padding: 0 1rem;
` 
const HeroH6 = styled.h6`
font-size: clamp(1.5rem, 6vw, 4rem);
margin-bottom: 1.5rem;
letter-spacing: 3px;
padding: 0 1rem;
` 

正如你所看到的，我在主页中调用了后端(const-show(，我想在里面调用常量。

我的想法是放入{show}：{usernameshow}，但这不是更好的解决方案，我该如何解决？谢谢

Answer 1

首先添加一个状态变量

const [people, setpeople] = useState([]);

然后在得到响应后设置状态

const show = () => {
Axios.post("http://localhost:3001/show", {
nationality: natShow,
username: usernameShow,
money: moneyShow,
lastbid: lastbidShow,
}).then((response) => {
setpeople(response);   // LOOK HERE
})
};

然后将它们显示在您的退货中(如果您的回复是一系列人(

<HeroH6>  {people.map(item => <div> {item.toString()} </div>)} </HeroH6>