React Native - React Hooks - useState 没有立即更新我的 state

Question

I am trying to pass the updated value through convert function to display the new result on every state update but it seems the states "const [values]" is not updating immediately and I am getting results from previous state value. So with every value change my results are a step behind. In the console I can see I am getting new value from the input but the "values" state shows previous values.

 const [values, setValues] = useState({ sqmtr: "", sqft: "", }); const handleTextChange = (text, name) => { setValues({...values, [name]: text }); convert(unit, values); console.log(text); console.log(values); };

 <TextInput style={styles.inputField} defaultValue={values.sqmtr} onChangeText={(text) => handleTextChange(text, "sqmtr")} placeholder="0" keyboardType={"numeric"} />

Answer 1

It works fine, because setState is asynchronous. New set value will be seen in a new component render.

Answer 2

const handleTextChange = (text, name) => {
  const value = { ...values, [name]: text }
  // `setValues` is async. so use the value directly
  setValues(value);
  convert(unit, value);
  console.log(text);
  console.log(values);
};

Answer 3

Use async/await before logging the result

const handleTextChange = async(text, name) => {
       await setValues({ ...values, [name]: text });
       await convert(unit, values);
                await console.log(text);
                await console.log(values);
    };