React中更新useState数组无法触发组件刷新问题求助

修改viaList状态时无法触发组件更新，请求帮助。另外希望尽量避免通过追加子元素的方式实现需求。

代码示例 #

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

function BookingForm() {
  const [viaList, setViaList] = useState([]);

  function addViaLocation() {
    const arr = viaList;

    arr.push(
    <li key={uuidv4()}>
      <label className="form-label">
        Via Location
      </label>
    </li>)

    setViaList(arr);
  }

  return (
    <>
      <button onClick={addViaLocation} className="button-standard primary" type="button">
        Add Additional Location
      </button>
      <ul>{viaList.length > 0 && viaList.map(item => item)}</ul>
    </>
  );
}

export default BookingForm;

已考虑的方案 #

• 将功能拆分到独立组件
• 通过props触发更新
• 常规DOM操作（但追加不符合业务场景）

核心问题分析 #

问题根源有两点：

1. 直接修改原状态数组：const arr = viaList只是复制了原数组的引用，arr.push()修改的是同一个数组。React依赖引用变化判断状态是否更新，新旧状态引用相同时，不会触发组件重渲染。
2. 状态存储JSX元素：把JSX直接存在状态里不符合React最佳实践，状态应存储数据，UI渲染由数据驱动。

修正后的代码 #

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

function BookingForm() {
  // 状态存储数据而非JSX，每个元素带唯一ID
  const [viaList, setViaList] = useState([]);

  function addViaLocation() {
    // 用函数式更新创建新数组，确保引用变化
    setViaList(prevList => [...prevList, { id: uuidv4() }]);
  }

  return (
    <>
      <button onClick={addViaLocation} className="button-standard primary" type="button">
        Add Additional Location
      </button>
      <ul>
        {/* 根据数据渲染JSX */}
        {viaList.map(item => (
          <li key={item.id}>
            <label className="form-label">
              Via Location
            </label>
          </li>
        ))}
      </ul>
    </>
  );
}

export default BookingForm;

关键改动说明 #

• 创建新数组更新状态：使用函数式更新setViaList(prevList => [...prevList, newItem])，通过扩展运算符生成原数组的副本并添加新元素，确保状态引用改变，触发React重渲染。
• 数据驱动UI：viaList现在存储带唯一ID的对象数组，渲染时通过map生成对应JSX，后续要修改途经地点内容时，只需更新数据即可，更易维护和扩展。

额外优化建议 #

如果需要给每个途经地点添加输入、删除等交互，可以拆分出独立组件，让代码结构更清晰：

function ViaLocationItem({ id, onRemove }) {
  return (
    <li key={id}>
      <label className="form-label">Via Location</label>
      <input type="text" placeholder="输入途经地点" />
      <button onClick={() => onRemove(id)}>删除</button>
    </li>
  );
}

// 在BookingForm中使用
<ul>
  {viaList.map(item => (
    <ViaLocationItem 
      key={item.id} 
      id={item.id} 
      onRemove={(id) => setViaList(prev => prev.filter(item => item.id !== id))} 
    />
  ))}
</ul>

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