使用 useState 时，Reactjs 不会立即更新分配的值

Question

Reactjs 当我使用 usestate hook 时不更新新值：看这个例子：

import React, { useState, useEffect } from "react";

const Dictionary = () => {
  const [name, setName] = useState("Bob");

  useEffect(() => {
    updateName();
  }, []);

  const updateName = () => {
    setName("John");
    console.log("name:", name); // prints "Bob"
    setName(myName => "John");
    console.log("name:", name); // prints "Bob"
  };

  return (
    <>
      <h2>Dictionary</h2>
    </>
  );
};

我尝试过使用 promises 但我也没有得到解决方案。

const updateName = async () => {
    await uName("John");
    console.log(name); // "Bob"
  };

  const uName = (nam) => {
    return new Promise((res, rej) => {
      setName(nam);
      res();
    });
  };

Answer 1

React 仍然是 Javascript，它只会在下一个运行时更新值。

请参阅下面的注释代码：

  const updateName = () => {
    setName("John");        // Updates the name. Will be "John" on the next render
    console.log("name:", name); // Should print "Bob"
    setName(myName => "John");  // Will run `myName => "John"` on the next render. 
    console.log("name:", name); // Should print "Bob"
  };

当您运行 set 挂钩时，它会将值标记为已更新并在 render 完成后立即触发新的渲染。

您不能更改状态渲染中的更新值，因为 render() 顶部的代码将运行与旧值。

直接来自 the React documentation:

component schedules a UI update by calling setState() [...] Thanks to the setState() call, React knows the state has changed, and calls the render() method again to learn what should be on the screen

Answer 2

将您的代码更新为：

import React, { useState, useEffect } from "react";

const Dictionary = () => {
  const [name, setName] = useState("Bob");

  useEffect(() => {
    updateName();
  }, []);


  useEffect(() => {
    /* Use this useEffect to perform actions when name get updated. */
    console.log(name);
  }, [name]);

  const updateName = () => {
    setName("John");
    console.log("name:", name); // prints "Bob"
    setName(myName => "John");
    console.log("name:", name); // prints "Bob"
  };

  return (
    <>
      <h2>Dictionary</h2>
    </>
  );
};

使用 useState 时，Reactjs 不会立即更新分配的值

Reactjs doesn't immediately update the assigned value when useState is used

asynchronous

reactjs

react-hooks

use-state