Next.js 中使用 useState 处理 API 响应的正确姿势

useEffect(() => {
    console.log('State data changed:', data);
}, [data]);

// 错误示例（导致重复请求）
for (const place of option) {
    const requests = option.map((p) => axios.get(`url`)); // 每次循环都重新生成并执行所有请求
    const responses = await Promise.all(requests);
    // ...
}

// 正确示例：构建 Promise 数组，一次性执行
const promises = option.map((place) => axios.get(`url`));
const responses = await Promise.all(promises);

import React, { useState, useEffect, useCallback } from 'react';
import axios from 'axios'; // 假设已安装 axios

function Buttons({ setOptionButtons, sendMessage, places }) {
  // 定义状态变量
  const [names, setNames] = useState([]);
  const [addresses, setAddresses] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  // 使用 useCallback 包装异步事件处理函数，优化性能
  const handleOptionClick = useCallback(async (input, option) => {
    // 如果正在加载，则提前返回，防止重复请求
    if (loading) return;

    setError(null); // 重置错误状态
    setLoading(true); // 设置加载状态为 true

    try {
      // 构建所有 API 请求的 Promise 数组
      const promises = option.map((place) =>
        // 替换为你的实际 API URL
        axios.get(`https://api.example.com/data?place=${place.id}`) 
      );

      // 使用 Promise.all 等待所有请求完成
      // 考虑使用 Promise.allSettled 获取每个 Promise 的结果，即使有失败的
      const responses = await Promise.all(promises);

      // 从所有响应中提取并扁平化 items
      const items = responses.flatMap((response) => response.data.result.items);

      // 提取新的名称和地址
      const newNames = items.map((item) => item.name);
      const newAddresses = items.map((item) => item.address_name);

      // 使用函数式更新来追加新的数据，确保基于最新状态
      setNames((prev) => [...prev, ...newNames]);
      setAddresses((prev) => [...prev, ...newAddresses]);

    } catch (err) {
      setError(err.message); // 捕获并设置错误信息
    } finally {
      // 无论成功或失败，都在 finally 块中处理加载状态和其它副作用
      setLoading(false);
      setOptionButtons(false);
      sendMessage(input);
    }
  }, [loading, sendMessage, setOptionButtons]); // 依赖项：loading, sendMessage, setOptionButtons

  // 使用 useEffect 观察 names 和 addresses 状态的变化
  useEffect(() => {
    console.log('Names state updated:', names);
    console.log('Addresses state updated:', addresses);
  }, [names, addresses]);

  return (
    // 你的 JSX 结构，例如按钮，点击时调用 handleOptionClick
    <div>
      {loading && <p>加载中...</p>}
      {error && <p style={{ color: 'red' }}>错误: {error}</p>}
      {/* 示例按钮，实际应用中根据你的 `option` 结构渲染 */}
      <button onClick={() => handleOptionClick('someInput', [{id: 'place1'}, {id: 'place2'}])}>
        获取数据
      </button>
      {/* 渲染获取到的 names 和 addresses */}
      <ul>
        {names.map((name, index) => <li key={index}>{name}</li>)}
      </ul>
      {/* ... */}
    </div>
  );
}

export default Buttons;