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

百度智能云·曦灵

百度旗下的ai数字人平台

102

查看详情

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;