无法过滤React状态，console.log始终显示初始值求助

核心问题1：React状态更新的异步性与闭包捕获 #

你遇到的console.log(mystate)始终显示初始值，根源在于两点：

• React的setState是异步操作，调用setmystate后，mystate不会立刻完成更新，所以紧接着的console.log拿到的还是更新前的旧值。
• useEffect的回调会捕获当前渲染周期的mystate值，由于你的useEffect仅依赖temp，每次temp变化时，回调里的mystate还是组件上一次渲染时的旧状态，并非最新值。

核心问题2：过滤逻辑的潜在缺陷 #

你的过滤逻辑基于上一次的mystate进行筛选，如果用户多次输入不同ID，会导致mystate被反复截断（比如第一次过滤掉id=1，第二次过滤id=2时，是在已经去掉id=1的数组基础上再过滤）。如果需求是根据当前输入的ID，从原始数据中过滤，应该直接基于原始的perosns数组操作，而非依赖上一次的状态。

修正后的代码 #

import { useState, useEffect } from 'react';

export let perosns = [
  {
    id: "1",
    first_name: "Mollie",
    last_name: "Keppin",
    email: "mkeppin0@geocities.jp",
    gender: "Female",
    age: 49,
  },
  // 其他数据项...
];

function Starts() {
  const [mystate, setmystate] = useState(perosns);
  const [temp, setTemp] = useState("");

  useEffect(() => {
    if (temp) {
      // 基于原始数据过滤，确保每次筛选都从完整数据集出发
      const filteredData = perosns.filter(Ele => Ele.id !== temp);
      setmystate(filteredData);
    } else {
      // 输入为空时恢复原始数据
      setmystate(perosns);
    }
  }, [temp]);

  // 监听mystate变化，打印最新值
  useEffect(() => {
    console.log("最新的mystate:", mystate);
  }, [mystate]);

  return (
    <>
      <input onKeyUp={(e) => setTemp(e.target.value)} placeholder="输入ID过滤" />
      {/* 渲染结果验证过滤效果 */}
      <ul>
        {mystate.map(item => (
          <li key={item.id}>{item.first_name} {item.last_name}</li>
        ))}
      </ul>
    </>
  );
}

export default Starts;

关键修改说明 #

1. 正确获取最新状态：新增依赖mystate的useEffect，当mystate真正更新后，这里会打印最新值。
2. 修复过滤逻辑：直接基于原始的perosns数组过滤，确保每次筛选都从完整数据出发，同时在输入为空时恢复原始数据。
3. 代码规范优化：将let改为const（状态变量无需重新赋值），添加输入框占位符和渲染逻辑方便验证结果。

如果你的需求确实是基于上一次的状态持续过滤（比如每次输入新ID都在现有结果中移除对应项），可以保留函数式更新写法，同时在回调内直接打印最新结果：

useEffect(() => {
  const handler = () => {
    setmystate(prevState => {
      const newState = prevState.filter(Ele => Ele.id !== temp);
      console.log("最新过滤结果:", newState);
      return newState;
    });
  };
  if (temp) {
    handler();
  }
}, [temp]);

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