javascript - 设置后如何获取状态值？

Question

在下面的代码中，我试图设置一个反应状态国家，我需要在设置后立即使用它。现在我只得到国家变量中以前的状态值。有什么方法可以在设置后立即获得国家价值？像回调或承诺？

import React,{useState,useEffect} from 'react';
import Axios from 'axios';


const url = 'https://restcountries.eu/rest/v2/name/'
let renderData= <div id="result"><h4>no Data </h4></div>

const Search = () =>
{

const [country,setCountry]=useState('');
const setCountryState = () =>
{   
    setCountry(event.target.value);
   somefunction(country); //I am calling Some Other function Here by passing country as variable
}

    return (
        <div>
            <form>
            <input type="text" value={country} onChange={setCountryState} placeholder="Country Name"/>
            </form>
            <div>
            {country}
            </div>
        </div>
    );

}

export default Search;

标签： javascriptreactjs

Answer 1

setState async 所以它不会立即更新。

相反，使用 useEffect 并将国家添加为依赖项。每次国家/地区更改时，useEffect 函数都会运行

import React,{useState,useEffect} from 'react';
import Axios from 'axios';


const url = 'https://restcountries.eu/rest/v2/name/'
let renderData= <div id="result"><h4>no Data </h4></div>

const Search = () =>
{

const [country,setCountry]=useState('');

useEffect(()=>{
    somefunction(country)
},[country])

const setCountryState = (event) =>
{   
    setCountry(event.target.value);
}

    return (
        <div>
            <form>
            <input type="text" value={country} onChange={setCountryState} placeholder="Country Name"/>
            </form>
            <div>
            {country}
            </div>
        </div>
    );

}

export default Search;