React.js v18 优雅实现列表 CRUD 操作 - 代码示例

以下是一个用 React.js v18 实现的示例代码，展示了如何根据一个列表的结果来获取每个列表项的状态，并展示所有的列表项，并且每个列表项都可以进行 CRUD 操作。

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

const List = () => {
  const [list, setList] = useState([]);
  const [items, setItems] = useState([]);

  useEffect(() => {
    // 获取列表数据
    fetchList()
      .then((listData) => {
        setList(listData);
        // 根据列表数据获取每个列表项的状态
        return Promise.all(listData.map(fetchItem));
      })
      .then((itemData) => {
        setItems(itemData);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  const fetchList = () => {
    return fetch('https://api.example.com/lists')
      .then((response) => response.json())
      .then((data) => data.list);
  };

  const fetchItem = (listItem) => {
    return fetch(`https://api.example.com/lists/${listItem.id}`)
      .then((response) => response.json())
      .then((data) => data.item);
  };

  const handleCreate = (listItem) => {
    // 在列表中创建一个新的项
    createItem(listItem)
      .then((newItem) => {
        setItems([...items, newItem]);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  const handleUpdate = (listItem) => {
    // 更新列表中的一个项
    updateItem(listItem)
      .then((updatedItem) => {
        setItems((prevItems) =>
          prevItems.map((item) =>
            item.id === updatedItem.id ? updatedItem : item
          )
        );
      })
      .catch((error) => {
        console.error(error);
      });
  };

  const handleDelete = (listItem) => {
    // 从列表中删除一个项
    deleteItem(listItem)
      .then(() => {
        setItems((prevItems) =>
          prevItems.filter((item) => item.id !== listItem.id)
        );
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <div>
      <h1>List</h1>
      {list.map((listItem) => (
        <ListItem
          key={listItem.id}
          item={items.find((item) => item.id === listItem.id)}
          onCreate={handleCreate}
          onUpdate={handleUpdate}
          onDelete={handleDelete}
        />
      ))}
    </div>
  );
};

const ListItem = ({ item, onCreate, onUpdate, onDelete }) => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  useEffect(() => {
    if (item) {
      setName(item.name);
      setDescription(item.description);
    }
  }, [item]);

  const handleSubmit = (event) => {
    event.preventDefault();

    const listItem = { name, description };

    if (item) {
      // 更新项的信息
      onUpdate({ ...item, ...listItem });
    } else {
      // 创建新的项
      onCreate(listItem);
    }

    setName('');
    setDescription('');
  };

  const handleDelete = () => {
    onDelete(item);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type='text'
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
        <textarea
          value={description}
          onChange={(event) => setDescription(event.target.value)}
        />
        <button type='submit'>{item ? 'Update' : 'Create'}</button>
        {item && <button onClick={handleDelete}>Delete</button>}
      </form>
    </div>
  );
};

export default List;

在上面的代码中，List 组件是一个父组件，ListItem 组件是一个子组件。List 组件首先通过 fetchList 函数获取列表数据，并将其保存在 list 状态中。然后，它根据列表数据使用 Promise.all 和 fetchItem 函数获取每个列表项的状态，并将所有列表项保存在 items 状态中。

每个列表项都会被渲染为一个 ListItem 组件，并传递相应的数据和处理函数作为 props。ListItem 组件可以处理创建、更新和删除操作，根据传递的 item 数据进行相应的初始化和处理。当表单提交时，会调用相应的处理函数进行创建或更新操作，并重置表单字段。

这样，你就可以通过 List 组件展示所有的列表项，并让每个列表项都可以进行 CRUD 操作。请注意，这只是一个示例代码，你可能需要根据你的实际需求进行适当的修改和调整。