在React中渲染多对象是否需新增useState？如何整合current与location到data？

1. 接口返回多个对象时，是否需要创建新的useState？ #

不需要额外创建新的useState。你完全可以用现有的data状态存储整个接口返回的对象（包含current、location等子对象）。只有当这些子数据需要独立管理、或者组件不同部分要单独更新它们时，才考虑拆分多个useState。如果只是统一获取和展示，单状态更便于维护。

2. 如何将接口返回的current和location数据整合到data状态中？ #

你的代码其实已经在做这件事了，但有个小问题：data的初始状态是[]（数组），但接口返回的是对象，所以要把初始状态改成空对象{}，避免类型不匹配的问题。修改后，setData(res)会直接把包含current和location的整个接口响应存入data，之后就能通过data.current和data.location访问对应数据。

修改后的完整代码示例：

const [data, setData] = useState({}); // 改为空对象，匹配接口返回格式
const [input, setInput] = useState("");

const getWeather = async () => {
  try {
    const response = await fetch(
      `http://api.weatherapi.com/v1/current.json?key=${process.env.API_KEY}&q=${input}&aqi=yes`
    );
    const res = await response.json();
    console.log(res);
    setData(res); // 直接存入完整响应对象，自动包含current和location
  } catch (error) {
    console.error("获取天气数据失败:", error);
    // 可在此添加错误提示逻辑，比如弹窗告知用户
  }
};

const onSubmit = (e) => {
  e.preventDefault();
  getWeather();
  setInput("");
};

后续使用数据时，比如展示城市名称和当前温度：

{data.location && data.current && (
  <div>
    <p>城市：{data.location.name}</p>
    <p>当前温度：{data.current.temp_c}℃</p>
  </div>
)}

这里加了&&判断是为了避免数据未加载时访问undefined的属性导致报错。

内容的提问来源于stack exchange，提问作者Ronell Villamil