reactjs 无法理解状态中的用户名长度与输入中的用户名长度之间的差异

t3irkdon 于 2023-02-22 发布在 React

关注(0)|答案(1)|浏览(100)

我如何同步regexp测试验证和渲染，因为看起来，例如，如果验证regexp允许5个字符，当我在输入字段中已经有6个字符时，它将变为真，在我看来，它与渲染状态有关。

用户名状态：

const [username, setUsername] = useState({
    name: "",
    isValid: false,
  });

处理用户名函数：

function handleUsername(e) {
    const regexp = new RegExp(/[a-zA-Z][a-zA-Z0-9-_]{5,32}/gi);
    const isValid = regexp.test(username.name);
    setUsername(() => {
      return {
        name: e,
        isValid: isValid ? true : false,
      };
    });
    console.log("isValid - ",
      isValid,
      "|",
      "username.name.length - ",
      username.name.length); // => isValid -  false | username.name.length -  5
  }

在函数外运行console.log：

console.log(
      "username.name.length - ",
      username.name.length); // => username.name.length -  6

我试图弄清楚为什么会发生这种情况，但结果却是更多的困惑。

reactjs

来源：https://stackoverflow.com/questions/75518301/cant-understand-the-difference-between-username-length-in-the-state-and-in-the

1条答案

按热度按时间

omqzjyyz1#

setState是异步的，所以你是console.logging陈旧的状态。

function handleUsername(e) {
    const regexp = new RegExp(/[a-zA-Z][a-zA-Z0-9-_]{5,32}/gi);
    const isValid = regexp.test(username.name);
    setUsername(() => {
      return {
        name: e,
        isValid: true,
      };
    });
    console.log("isValid - ",
      isValid,
      "|",
      "e.length - ",
      e.length); // => isValid -  false | e.length -  6
  }

使用定义新状态的变量，或者使用console.log将其记录在具有用户名依赖项的useEffect中

useEffect(() => {
console.log(username.name.length)

}, [username])

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs 无法理解状态中的用户名长度与输入中的用户名长度之间的差异

1条答案

相关问题

热门标签

最新问答