잼민이0326
47
2022-05-10 19:12:48 작성 2022-05-10 19:16:48 수정됨
5
161

리액트 동적 api


리액트 처음 공부 하는 학생입니다. 

<select> 를 통해서 값을 button에 전달하고 전달된 값을 api 주소에 적용 시켜서 api 결과 값을 동적으로 만들어 보고 싶은데 잘 되지 않아서 문의 합니다. 

const [country , setcountry] 의 초기 값은 Japan 이고 , const [populated, setpopulated]의 초기값은 10km 미터입니다. 

이 결과 값들은 테이블 통해서 보여 집니다. 

button 의 이벤트를 통해서 결과 값이 변경이 되고, 변경된 값은 함수에 들어가서 

API: country=${country}&populatedWithin=${within}

API 를 통해서 값을 변경 하고 싶은데 변경이 되지 않습니다. 

무엇이 잘못됐는지 잘 몰라서.. 문의 드립니다. 

import {Countries} from "../src/api/api.js"
import {GetVolcanoeByQuery} from "../src/api/api.js"
import { Button } from "../src/button.js";
export default function VolcanoList(){
const countries = Countries();
const [country, setcountry] = useState("Japan");
const [populated, setpopulated] = useState("10km");
const Gettable = GetVolcanoeByQuery(country,populated)


const columns = [
{ headerName: "Name", field: "name", sortable: true, filter: true },
{ headerName: "Region", field: "region", sortable: true },
{ headerName: "Subregion", field: "subregion", sortable: true },
]

return (
<div class = "select-country">
Country:
<select value = {country} onChange={event =>{
const {country} = event.target;
setcountry(country);
}}>
{countries.map((countries) => (
<option
key={countries.value}
value={countries.value}
>
{countries}
</option>
))}
</select>
<div class = "populated">
Populated within:
<select value = {populated} onChange={event =>{
const {populated} = event.target;
setpopulated(populated);
}}>
<option value="5km">5km</option>
<option value="10km">10km</option>
<option value="30km">30km</option>
<option value="100km">100km</option>
</select>
</div>
<Button onclick = {GetVolcanoeByQuery(country, populated)} id ="change_value" label= "click"
/>
<div
className="ag-theme-balham"
style={{
height: "300px",
width: "800px"
}}
>
<AgGridReact
columnDefs={columns}
rowData={Gettable}
pagination={true}
paginationPageSize={10}
/>
</div>
</div>
)
}
("../src/api/api.js")
export function GetVolcanoeByQuery(country,within){

const API_URL = `[비공개]country=${country}&populatedWithin=${within}`;
const [TableDataerror, setTableDataError] = useState();
const [TableData, setTableData] = useState([]);
useEffect(() => {
fetch(API_URL)
.then(TableData => {
return TableData.json();
})
.then(TableData => {
setTableData(TableData);
})
.then (error => {
TableDataerror(error);
setTableDataError(false);
})
}, [])
return (
TableData
);
}
0
  • 답변 5

  • 수박수박
    303
    2022-05-10 20:21:25

    GetVolcanoByQuery의 useEffect 의존성배열에 contry, within넣고 const로 API_URL선언해놓지말고

    fetch안에 전체 URL써놓으세요 
    fetch(~~${contry}~~${within}) 이렇게요

  • 잼민이0326
    47
    2022-05-10 21:27:29


    의존성 배열에 안에 값을 넣으라는 말씀이, useEffect(() => {

    fetch(API_URL)
    .then(TableData => {
    return TableData.json();
    })
    .then(TableData => {
    setTableData(TableData);
    })
    .then (error => {
    TableDataerror(error);
    setTableDataError(false);
    })
    }, [country,within])
    이렇게 하라는 말씀이신가요?
    fetch( 값) 은 변경했습니다.
  • 수박수박
    303
    2022-05-10 21:58:41

    네 아 근데 다시보니까  <Button onclick = {GetVolcanoeByQuery(country, populated)} id ="change_value" label= "click"

    />
    이 부분이 조금 잘못된거 같은데,
    <Button onclick = {() => GetVolcanoeByQuery(country, populated)} id ="change_value" label= "click"
    />
    이렇게 수정해보시겠어요 ?
  • 잼민이0326
    47
    2022-05-10 22:16:25 작성 2022-05-10 22:20:25 수정됨

    네, 수정해서 해봤는데 button 이벤트가 발생하지 않는거 같아요.. 

    수정 전이랑 후랑 똑같네요. 

    ncaught TypeError: Cannot read properties of null (reading 'map') 

    널 값이 들어 가는거 같네요. 

    console.log 로 찍어보니깐 값 전달이 전혀 안되네요.. ㅎㅎ ;;

  • 잼민이0326
    47
    2022-05-10 22:48:24

    감사합니다. 덕분에 수정 잘했습니다. 알려주신 부분은 이상이 없었고 

    select 부분에서 문제가 발생해서 수정해서 지금은 프로그램이 잘 돌아갑니다. 도움주셔서 감사합니다 ^^ 


  • 로그인을 하시면 답변을 등록할 수 있습니다.