将加载状态应用于在数组中单击的项- React

import React, { useState } from 'react';

const Item = ({ item }) => {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = () => {
    setIsLoading(true);

    // 在此处执行加载项的操作，例如发送网络请求或执行其他异步任务

    // 加载完成后，将isLoading状态设置为false
    setIsLoading(false);
  };

  return (
    <div>
      <span>{item}</span>
      <button onClick={handleClick}>加载</button>
      {isLoading && <span>加载中...</span>}
    </div>
  );
};

export default Item;

import React from 'react';
import Item from './Item';

const App = () => {
  const items = ['项1', '项2', '项3'];

  return (
    <div>
      {items.map((item, index) => (
        <Item key={index} item={item} />
      ))}
    </div>
  );
};

export default App;