面试题：React中如何动态增删列表项并保持状态同步

Question

在React应用中，有一个展示用户列表的组件。要求实现通过点击按钮新增用户项，并且每个用户项旁边有删除按钮可删除该项。请描述实现思路并给出关键代码示例，需处理好状态同步问题，确保数据和视图的一致性。

Answer 1

实现思路

1. 状态管理：在组件中使用 useState 来管理用户列表的状态。一个状态变量存储用户列表数据，另一个状态变量用于输入新用户的名称。
2. 新增用户：点击新增按钮时，将输入框中的新用户名称添加到用户列表状态中，并清空输入框。
3. 删除用户：为每个用户项添加删除按钮，点击删除按钮时，根据用户的索引或唯一标识从用户列表状态中移除该用户。
4. 视图更新：由于 React 的状态机制，状态变化时会自动重新渲染组件，从而确保数据和视图的一致性。

关键代码示例

import React, { useState } from'react';

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [newUserName, setNewUserName] = useState('');

  const addUser = () => {
    if (newUserName.trim()!== '') {
      setUsers([...users, newUserName]);
      setNewUserName('');
    }
  };

  const deleteUser = (index) => {
    const newUsers = [...users];
    newUsers.splice(index, 1);
    setUsers(newUsers);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="输入新用户名称"
        value={newUserName}
        onChange={(e) => setNewUserName(e.target.value)}
      />
      <button onClick={addUser}>新增用户</button>
      <ul>
        {users.map((user, index) => (
          <li key={index}>
            {user}
            <button onClick={() => deleteUser(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;