在 function Reactjs 中调用 const

Question

i'm creating an app where show a display the people who registered into my database, i've some doubt on how to show the people, calling the const (show) inside the function:

That's my code

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;
` 

as you can see I called the backend (const show) inside the Home page and I would like to call the constant inside.

my idea was to put inside {show}: {usernameshow} but that's not the better solution, how can i resolve that? thanks!

Answer 1

First add a state variable

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

Then set the state after getting response

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

    setpeople(response);   // LOOK HERE

  })
};

Then show them inside your return (if your response is an array of people)

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