0

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

这是我的代码

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} 但这不是更好的解决方案，我该如何解决？谢谢！

4

1 回答 1

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>
于 2020-12-21T14:34:42.337 回答