Next.js中异步API响应与React状态更新的最佳实践

import React, { useState, useEffect, useCallback } from 'react';
import axios from '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 handleOptionPress = useCallback(async (input, option) => {
    // 如果当前正在加载，则直接返回，避免重复请求
    if (loading) return;

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

    try {
      // 构建所有 API 请求的 Promise 数组
      const promises = option.map((place) =>
        // 替换为你的实际 API 地址
        axios.get(`https://your-api-url-here/${place.id}`)
      );

      // 使用 Promise.all 并行发送所有请求，并等待所有响应
      // 也可以考虑使用 Promise.allSettled 来处理部分请求失败的情况
      const responses = await Promise.all(promises);

      // 从所有响应中提取所需的数据项
      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); // 设置加载状态为 false
      setOptionButtons(false); // 关闭选项按钮
      sendMessage(input); // 发送消息
    }
  }, [loading, sendMessage, setOptionButtons]); // 依赖项数组

  // 使用 useEffect 观察 names 或 addresses 状态的变化
  // 仅用于调试或需要副作用的场景
  useEffect(() => {
    if (names.length > 0) {
      console.log('更新后的名称:', names);
    }
    if (addresses.length > 0) {
      console.log('更新后的地址:', addresses);
    }
  }, [names, addresses]); // 仅当 names 或 addresses 变化时触发

  return (
    // 这里放置你的 HTML/JSX 代码，例如按钮等
    // <button onClick={() => handleOptionPress('someInput', someOptionData)}>
    //   Press Option
    // </button>
    // {loading && <p>加载中...</p>}
    // {error && <p style={{ color: 'red' }}>错误: {error}</p>}
    // <div>
    //   <h3>名称列表:</h3>
    //   <ul>
    //     {names.map((name, index) => (
    //       <li key={index}>{name}</li>
    //     ))}
    //   </ul>
    // </div>
    // <div>
    //   <h3>地址列表:</h3>
    //   <ul>
    //     {addresses.map((address, index) => (
    //       <li key={index}>{address}</li>
    //     ))}
    //   </ul>
    // </div>
    <>
      {/* 你的组件UI */}
    </>
  );
}

export default Buttons;