React onChange更新State时出现少一位字符的异常行为

嘿，这个问题我碰到过好多次了！核心原因其实是React的State更新是异步批量处理的，咱们一步步说清楚：

问题根源 #

不管你用的是类组件的setState还是函数组件的useState更新函数，React都不会在你调用更新方法后立刻修改State值。它会把这些更新请求攒起来批量处理，以此避免不必要的组件重渲染，提升整体性能。

举个具体的例子：当你输入"charm"时，触发输入事件后拿到输入框的值是"charm"，调用setPokemonName("charm")，但此时React还没来得及完成State更新——你紧接着打印的pokemonName还是上一次的旧值"char"，这就出现了“少一位字符”的情况。

解决办法 #

根据你使用的组件类型，有两种靠谱的处理方式：

1. 函数组件（React主流写法）

用useEffect监听State的变化，当State真正更新完成后，再执行打印、调用PokeAPI这类操作：

import { useState, useEffect } from 'react';

function Pokedex() {
  const [pokemonName, setPokemonName] = useState('');

  const handleInputChange = (e) => {
    const newValue = e.target.value;
    setPokemonName(newValue);
    // 这里别直接打印，拿到的是旧值！
  };

  // 监听pokemonName的变化，更新后再执行逻辑
  useEffect(() => {
    if (pokemonName) { // 加个判断避免空值请求
      console.log('最新的宝可梦名称：', pokemonName);
      // 在这里调用PokeAPI查询对应的宝可梦
      // fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`)...
    }
  }, [pokemonName]); // 依赖项填pokemonName，只有它变化时才触发

  return (
    <input 
      type="text" 
      value={pokemonName} 
      onChange={handleInputChange}
      placeholder="输入宝可梦名称"
    />
  );
}

2. 类组件

如果是类组件的话，可以用setState的第二个回调参数，这个回调会在State更新完成、组件重渲染后执行：

class Pokedex extends React.Component {
  state = { pokemonName: '' };

  handleInputChange = (e) => {
    const newValue = e.target.value;
    this.setState({ pokemonName: newValue }, () => {
      // 这里拿到的是更新后的State
      console.log('最新的宝可梦名称：', this.state.pokemonName);
      // 在这里调用PokeAPI
    });
  };

  render() {
    return (
      <input 
        type="text" 
        value={this.state.pokemonName} 
        onChange={this.handleInputChange}
        placeholder="输入宝可梦名称"
      />
    );
  }
}

额外提醒 #

别想着用“同步”的方式强制获取更新后的State，React的异步更新机制是为了性能优化设计的，遵循它的规则写代码会更顺畅～

内容的提问来源于stack exchange，提问作者Regentix