Question

我正在尝试通过convert函数传递更新后的值，以在每次状态更新时显示新结果，但是似乎状态“ const [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

它工作正常，因为setState是异步的。新的设置值将在新的组件渲染中看到。

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

在记录结果之前使用async / await

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

React Native-React Hooks-useState不会立即更新我的状态

3 个答案: