React中useState数组更新仅第二次提交后生效的问题排查

问题根源 #

你遇到的核心问题是useState的更新是异步的：调用setLeads后，leads变量不会立刻同步更新，所以clickSubmit里的console.log(leads)打印的始终是触发更新前的旧值，让你误以为第二次提交才生效。另外，循环中多次调用setLeads虽然用了函数式更新，但多次触发状态更新既不高效，也容易加深误解。

解决方案（仅用useState） #

1. 批量生成新数据，一次性更新状态

先在parseString中遍历生成所有有效lead，再一次性合并到原数组，避免多次状态更新。

2. 避免即时打印旧值

通过组件渲染结果验证状态更新，而非依赖console.log的旧值（因异步特性，它无法即时获取新状态）。

修改后的完整代码 #

import {Fragment, useState} from "react";
import Layout from "./pages/Layout";

function App() {
  const [values, setValues] = useState({
    string: 'Select item 469 James Bond James Bond jamesbond@outlook.com api True Select item 470 Freddy Mercury Freddy Mercury freddymercury@gmail.com api True Select item 471 Brian May Brian May brianmay@astrarecords.co.uk api True',
    error: false,
    success: false
  });

  const [leads, setLeads] = useState([
    { firstname: "", lastname: "", email: "" }
  ]);

  const { string, error, success } = values;

  const clickSubmit = (e) => {
    e.preventDefault();
    parseString();
    // 此处leads为更新前旧值，请勿依赖它验证结果，直接看页面渲染的列表即可
  };

  const handleChange = name => e => {
    // 用函数式更新避免闭包捕获旧值
    setValues(prev => ({ ...prev, [name]: e.target.value }));
  };

  const parseString = () => {
    const chunks = string.split("Select item ");
    const newLeads = [];
    
    for (let i = 0; i < chunks.length; i++) {
      const chunk = chunks[i].trim();
      if (!chunk) continue; // 跳过split后产生的空字符串
      
      const ck = chunk.split(" ");
      if (ck.length >= 6) { // 避免数组越界产生undefined
        newLeads.push({
          firstname: ck[1],
          lastname: ck[2],
          email: ck[5]
        });
      }
    }

    // 一次性合并新数据到原数组，用函数式更新确保基于最新状态
    setLeads(prevLeads => [...prevLeads, ...newLeads]);
  };

  function formInput() {
    return (
      <Fragment>
        <h3>Please enter the text here:</h3>
        <form onSubmit={clickSubmit}>
          <div className="form-group">
            <label htmlFor="exampleFormControlTextarea1">Textarea</label>
            <textarea
              onChange={handleChange('string')}
              className="form-control"
              id="exampleFormControlTextarea1"
              rows="10"
              value={string}
            ></textarea>
          </div>
          <div className="form-group row">
            <div className="col-sm-10">
              <button type="submit" className="btn btn-primary">Parse and send</button>
            </div>
          </div>
        </form>
        {/* 新增渲染区域，实时展示更新后的leads */}
        <div className="mt-4">
          <h4>解析结果:</h4>
          <ul>
            {leads.map((lead, index) => (
              <li key={index}>
                {lead.firstname} {lead.lastname} - {lead.email}
              </li>
            ))}
          </ul>
        </div>
      </Fragment>
    );
  }

  return (
    <Layout
      title="Lead Parser Input"
      description="tool for parsing leads"
      className="container col-md-8 offset-md-2"
    >
      {formInput()}
    </Layout>
  );
}

export default App;

关键修改点说明 #

• 批量更新：先收集所有有效lead再一次性更新，减少状态更新次数，逻辑更清晰。
• 修复闭包问题：handleChange改用函数式更新setValues(prev => ...)，避免因闭包捕获旧值导致的更新异常。
• 无效数据过滤：处理split后产生的空字符串，避免生成无效lead。
• 可视化验证：新增leads列表渲染，提交后可直接在页面看到最新结果，无需依赖console.log。

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