Next.js中异步API响应与React状态管理深度指南

import React, { useState, useEffect, useCallback } from 'react';
import axios from 'axios';

function Buttons({ setOptionButtons, sendMessage, places }) {
  // 定义组件状态
  const [data, setData] = useState(null); // 如果需要，可以用于存储原始API响应
  const [names, setNames] = useState([]); // 存储从API获取的名称列表
  const [addresses, setAddresses] = useState([]); // 存储从API获取的地址列表
  const [error, setError] = useState(null); // 存储错误信息
  const [loading, setLoading] = useState(false); // 控制加载状态

  // 使用useCallback优化事件处理函数
  // 确保onClick函数在依赖项未改变时不会重新创建，提高性能
  const onClick = useCallback(async (input, option) => {
    // 如果当前正在加载，则直接返回，避免重复请求
    if (loading) return;

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

    try {
      const promises = []; // 用于收集所有API请求的Promise

      // 遍历option数组，为每个place创建API请求Promise
      // 注意：这里假设所有请求的URL结构相同，或者需要根据place动态构建URL
      for (const place of option) {
        promises.push(axios.get(`https://api.example.com/data/${place.id}`)); // 示例URL，请替换为实际API端点
      }

      // 使用Promise.all等待所有API请求完成
      // Promise.allSettled是Promise.all的替代方案，可以处理部分请求失败的情况
      const responses = await Promise.all(promises);

      // 从所有响应中提取items
      const items = responses.flatMap((response) => {
        // 确保response.data和response.data.result存在
        return response.data?.result?.items || [];
      });

      // 从items中提取name和address_name
      const newNames = items.map((item) => item.name);
      const newAddresses = items.map((item) => item.address_name);

      // 使用函数式更新来安全地更新names和addresses状态
      // 这样可以确保在基于先前状态计算新状态时，总是使用最新的状态值
      setNames((prev) => [...prev, ...newNames]);
      setAddresses((prev) => [...prev, ...newAddresses]);

      // 如果需要，也可以将完整的items存储到data状态
      // setData(items); 
    } catch (err) {
      setError(err.message); // 捕获并设置错误信息
    } finally {
      // 无论请求成功或失败，都在finally块中执行清理操作
      setLoading(false); // 结束加载状态
      setOptionButtons(false); // 更新其他UI状态
      sendMessage(input); // 发送消息
    }
  }, [loading, sendMessage, setOptionButtons]); // 依赖项列表

  // 示例：当data状态更新时，打印其值。
  // 注意：在当前优化方案中，我们主要更新names和addresses，
  // 如果data状态不被更新，此useEffect将不会触发。
  useEffect(() => {
    console.log("Current data state:", data);
  }, [data]);

  // 组件的渲染逻辑
  return (
    <div>
      {loading && <p>Loading...</p>}
      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
      {/* 示例按钮，点击时调用onClick */}
      <button onClick={() => onClick("some_input", [{id: 1, name: "placeA"}, {id: 2, name: "placeB"}])}>
        Fetch Data
      </button>
      <div>
        <h3>Names:</h3>
        <ul>
          {names.map((name, index) => (
            <li key={index}>{name}</li>
          ))}
        </ul>
      </div>
      <div>
        <h3>Addresses:</h3>
        <ul>
          {addresses.map((address, index) => (
            <li key={index}>{address}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default Buttons;