javascript 如何等待，直到在react [duplicate]中分配值

xzlaal3s 于 2023-01-11 发布在 Java

关注(0)|答案(2)|浏览(104)

- 此问题在此处已有答案**：

The useState set method is not reflecting a change immediately（16个答案）
21小时前关门了。
我是React框架的新手，遇到了以下问题：当我在赋值之后尝试调用后端api时，api在赋值在状态中更新之前被调用。
让我向您展示代码以获得更好的理解：

// define state in RFC 
  const [item, setItem] = useState("");

  // get value when user click submit button
  const itemInputOnClickHandler = ()=> {
  let comingItemValue = document.getElementById('item-input').value;
  setItem(comingItemValue);
  submitHandler();
  }

  // call api
  const submitHandler = async() => {
  await axios.post("API_URL");
  }


  // button in html:
  <Button label="submit" onClick={itemInputOnClickHandler} className="m-3 btn" />

我尝试了许多方法，但仍然得到相同的结果：在状态中更新分配的值之前调用API。
我怎样才能解决这个问题，使api在状态更新后被调用呢？

JavaScript

来源：https://stackoverflow.com/questions/75072831/how-to-wait-until-value-assigned-in-react

2条答案

按热度按时间

rnmwe5a21#

最好不要直接使用DOM函数，最好在用户更改值时将输入值存储在某种状态下，这样在提交时，该值就已经可用
尝试类似以下的方法-

// define state in RFC 
const [item, setItem] = useState("");
const [inputValue, setInputValue] = useState("");

const onInputChange = (e) => {
    setInputValue(e.target.value)
}

// get value when user click submit button
// this is a bit redundant now, you could call submitHandler directly as the onClick handler
const itemInputOnClickHandler = ()=> {
  submitHandler();
}

// call api
const submitHandler = async() => {
  // inputValue is available here to post
  await axios.post("API_URL");
}

// your text input field
<input onChange={onInputChange} ... />

// button in html:
<Button label="submit" onClick={itemInputOnClickHandler} className="m-3 btn" />

顺便说一句，您遇到的问题是设置状态为async，因此调用setItem(x)不会立即设置该值，它将在下一次渲染中可用，因此您的API函数正在获取旧值。

赞(0）回复(0）举报 2023-01-11

4ioopgfo2#

react的setState是异步的，因为它是一个开销很大的操作，并且选择一次进行多个状态更新以提高效率。
如果您希望在状态更改后调用API，我建议添加一个回调函数来处理状态更改，并在回调函数中执行API。
使用useCallback（）钩子并将状态添加为依赖项数组，以便在每次状态更改时执行。

赞(0）回复(0）举报 2023-01-11