리액트 처음 공부 하는 학생입니다.
<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
);
}
