React中useState获取prevState及遍历数组重复title问题求助

一、解决title/价格被覆盖的问题 #

你的代码里每次循环调用setTripPrice时，都在覆盖同一个price和title字段，所以最终tripPrice只会保留最后一个遍历项的信息，导致看起来“重复”（实际是只显示最后一项）。可以通过以下两种方式修复：

方案1：用数组存储所有产品的title和价格 #

将tripPrice初始化为数组，一次性处理所有数据后更新状态（更高效，避免多次触发状态更新）：

const [tripPrice, setTripPrice] = useState([]);

const price = () => {
  // 先处理所有数据，生成包含title和price的对象数组
  const processedData = treks_tours.map(item => ({
    title: item.title,
    price: item.Prices[0].split(" ")[3] // 提取价格数字
  }));
  setTripPrice(processedData);
};

useEffect(() => {
  price();
}, []);

之后展示时，直接遍历tripPrice数组即可：

{tripPrice.map((item, index) => (
  <div key={index}>
    <h3>{item.title}</h3>
    <p>价格：{item.price} per/person</p>
  </div>
))}

方案2：用对象以title为键存储价格 #

如果需要快速通过title查找价格，可以用对象结构，键为title，值为价格：

const [tripPrice, setTripPrice] = useState({});

const price = () => {
  const priceMap = treks_tours.reduce((acc, item) => {
    acc[item.title] = item.Prices[0].split(" ")[3];
    return acc;
  }, {});
  setTripPrice(priceMap);
};

useEffect(() => {
  price();
}, []);

展示时可以遍历对象的键值对：

{Object.entries(tripPrice).map(([title, price]) => (
  <div key={title}>
    <h3>{title}</h3>
    <p>价格：{price} per/person</p>
  </div>
))}

二、React useState中prevState的用法 #

prevState是setState回调函数的参数，代表更新前的最新状态值，当你的新状态依赖于旧状态时，必须使用这种回调形式（因为React的setState是异步的，直接读取当前状态可能拿到未更新的旧值）。

常见场景示例： #

1. 数组追加元素：

setItems(prev => [...prev, newItem]);

2. 对象合并新字段：

setUser(prev => ({...prev, age: 25}));

3. 数值累加：

setCount(prev => prev + 1);

回到你的原代码，虽然用了prevState，但每次都覆盖price和title，所以没有意义——正确的用法应该是基于旧状态扩展新数据（比如数组追加、对象新增键值对），而不是替换相同的字段。

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