如何将从JSON API取数的React类组件转换为函数组件？

下面是把你的类组件转换成函数组件的完整代码：

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

const Blah = () => {
  const [results, setResults] = useState([]);

  useEffect(() => {
    const url = "https://api.spoonacular.com/recipes/complexSearch?&apiKey=5ee5ea02063941f49492c145e967b7a8";
    fetch(url)
      .then((response) => response.json())
      .then((json) => setResults(json.results));
  }, []); // 空依赖数组表示仅在组件挂载时执行一次

  return (
    <div>
      {results.map((lol, index) => (
        <ShowDietPage key={index} food={lol.title} />
      ))}
    </div>
  );
};

export default Blah;

关键转换说明 #

• 状态管理：用useState钩子替代类组件的this.state，通过setResults更新状态，替代原来的this.setState
• 生命周期替代：用useEffect钩子替代componentDidMount，空依赖数组[]确保副作用仅在组件首次挂载时执行，和原生命周期行为一致
• 组件结构：移除类声明、构造函数，改为简洁的函数形式
• 细节优化：给map渲染的元素添加key属性（这里用索引临时替代，实际项目建议用数据唯一ID），避免React控制台警告

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