React可编辑列表框无法完整重渲染问题咨询

我正在React中构建一个可编辑列表框，后端功能运行正常，但前端无法正确重渲染。该组件支持6种操作：重命名元素、与上方元素交换、与下方元素交换、删除元素、在当前元素上方插入新元素、在末尾插入新元素。

具体问题：只有正在编辑的当前元素会重渲染，操作导致变化的其他元素不会重渲染。

组件外观：

源代码 #

export const EditableList = ({label, elements}) => {
    const classNames = (...classes) => {
        return classes.filter(Boolean).join(' ');
    };

    const [values, setValues] = useState([...elements]);

    return (
        <>
            <label className='font-medium block text-sm leading-6 text-gray-400'>{label}</label>
            <div>
                {values.map((value, key) => {
                    const changeItem = (e) => {
                        values[key] = e.target.value;
                    };

                    const moveItemUp = (e) => {
                        e.preventDefault();
                        const newValues = values.slice();
                        const temp = values[key - 1];
                        newValues[key - 1] = values[key];
                        newValues[key] = temp;
                        setValues(newValues);
                    };

                    const deleteItem = (e) => {
                        e.preventDefault();
                        setValues(values.filter((_, index) => {
                            return index !== key;
                        }));
                    };

                    const addItem = (e) => {
                        e.preventDefault();
                        setValues([...values.slice(0, key), '', ...values.slice(key)]);
                        // setElements(prevElements => [...prevElements.slice(0, key), '', ...prevElements.slice(key)]);
                    };

                    const moveItemDown = (e) => {
                        e.preventDefault();
                        const newValues = values.slice();
                        const temp = values[key + 1];
                        newValues[key + 1] = values[key];
                        newValues[key] = temp;
                        setValues(newValues);
                    };

                    return (
                        <div key={key} className="mt-2 flex">
                            <input
                                spellCheck='false'
                                type='text'
                                className="block w-full rounded-md border-0 py-1.5 bg-transparent text-gray-400 shadow-sm ring-1 ring-inset ring-gray-500 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 disabled:bg-gray-700"
                                defaultValue={value}
                                onChange={changeItem}
                            />
                            <div className='ml-4 flex space-x-2'>
                                <SecondaryButton
                                    className={classNames('text-gray-400 bg-gray-900 px-3 py-2 border border-gray-900',
                                        'font-semibold rounded-md hover:bg-gray-700 active:bg-gray-950')}
                                    disabled={key === 0}
                                    onClick={moveItemUp}>
                                    ^
                                </SecondaryButton>
                                <SecondaryButton type="button"
                                    value={key}
                                    className={classNames('text-red-400 bg-gray-900 px-3 py-2 border border-gray-900',
                                        'font-semibold rounded-md hover:bg-red-950 active:bg-gray-950',
                                        'hover:border-red-950')}
                                    onClick={deleteItem}>
                                    -
                                </SecondaryButton>
                                <SecondaryButton
                                    className={classNames('text-green-400 bg-gray-900 px-3 py-2 border border-gray-900',
                                        'font-semibold rounded-md hover:bg-green-950 active:bg-gray-950',
                                        'hover:border-green-950')}
                                    onClick={addItem}>
                                    +
                                </SecondaryButton>
                                <SecondaryButton
                                    className={classNames('text-gray-400 bg-gray-900 px-3 py-2 border border-gray-900',
                                        'font-semibold rounded-md hover:bg-gray-700 active:bg-gray-950')}
                                    onClick={moveItemDown} disabled={key === values.length - 1}>
                                    v
                                </SecondaryButton>
                            </div>
                        </div>
                    );
                })}
            </div>
            <SecondaryButton className='mt-4' onClick={(e) => {
                e.preventDefault();
                setValues([...values, '']);
            }}>Add To Bottom</SecondaryButton>
        </>
    );
};
EditableList.propTypes = {
    label: PropTypes.string,
    elements: PropTypes.array,
};

问题根源及修复方案 #

1. 数组索引作为key导致组件复用 #

React通过key识别列表项唯一性，用索引当key时，元素位置变化后，React会复用原有组件而非重新渲染，导致视图与状态不同步。

修复：给每个元素添加唯一标识符（如id），若无法修改数据源，可临时用value + key组合作为key：

<div key={`${value}-${key}`} className="mt-2 flex">

2. 直接修改state数组未触发更新 #

changeItem函数直接修改values[key] = e.target.value，未调用setValues更新状态，React无法感知变化。

修复：创建新数组并更新state：

const changeItem = (e) => {
  const newValues = [...values];
  newValues[key] = e.target.value;
  setValues(newValues);
};

3. Input使用非受控模式（defaultValue） #

defaultValue仅初始化时生效，后续状态变化不会同步到input，导致视图不更新。

修复：改为受控组件，绑定value与状态：

<input
  spellCheck='false'
  type='text'
  className="..."
  value={value}
  onChange={changeItem}
/>

4. 优化事件处理函数（可选） #

将事件处理函数移到map外部，用useCallback缓存，避免每次渲染创建新函数：

const moveItemUp = useCallback((key) => (e) => {
  e.preventDefault();
  if (key === 0) return;
  const newValues = [...values];
  [newValues[key - 1], newValues[key]] = [newValues[key], newValues[key - 1]];
  setValues(newValues);
}, [values]);

修改后的完整代码示例 #

import { useState, useCallback } from 'react';
import PropTypes from 'prop-types';

export const EditableList = ({ label, elements }) => {
  const classNames = (...classes) => {
    return classes.filter(Boolean).join(' ');
  };

  const [values, setValues] = useState([...elements]);

  const changeItem = useCallback((key) => (e) => {
    const newValues = [...values];
    newValues[key] = e.target.value;
    setValues(newValues);
  }, [values]);

  const moveItemUp = useCallback((key) => (e) => {
    e.preventDefault();
    if (key === 0) return;
    const newValues = [...values];
    [newValues[key - 1], newValues[key]] = [newValues[key], newValues[key - 1]];
    setValues(newValues);
  }, [values]);

  const deleteItem = useCallback((key) => (e) => {
    e.preventDefault();
    setValues(values.filter((_, index) => index !== key));
  }, [values]);

  const addItem = useCallback((key) => (e) => {
    e.preventDefault();
    setValues([...values.slice(0, key), '', ...values.slice(key)]);
  }, [values]);

  const moveItemDown = useCallback((key) => (e) => {
    e.preventDefault();
    if (key === values.length - 1) return;
    const newValues = [...values];
    [newValues[key + 1], newValues[key]] = [newValues[key], newValues[key + 1]];
    setValues(newValues);
  }, [values]);

  const addToBottom = useCallback((e) => {
    e.preventDefault();
    setValues([...values, '']);
  }, [values]);

  return (
    <>
      <label className='font-medium block text-sm leading-6 text-gray-400'>{label}</label>
      <div>
        {values.map((value, key) => (
          <div key={`${value}-${key}`} className="mt-2 flex">
            <input
              spellCheck='false'
              type='text'
              className="block w-full rounded-md border-0 py-1.5 bg-transparent text-gray-400 shadow-sm ring-1 ring-inset ring-gray-500 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 disabled:bg-gray-700"
              value={value}
              onChange={changeItem(key)}
            />
            <div className='ml-4 flex space-x-2'>
              <SecondaryButton
                className={classNames('text-gray-400 bg-gray-900 px-3 py-2 border border-gray-900',
                  'font-semibold rounded-md hover:bg-gray-700 active:bg-gray-950')}
                disabled={key === 0}
                onClick={moveItemUp(key)}>
                ^
              </SecondaryButton>
              <SecondaryButton type="button"
                className={classNames('text-red-400 bg-gray-900 px-3 py-2 border border-gray-900',
                  'font-semibold rounded-md hover:bg-red-950 active:bg-gray-950',
                  'hover:border-red-950')}
                onClick={deleteItem(key)}>
                -
              </SecondaryButton>
              <SecondaryButton
                className={classNames('text-green-400 bg-gray-900 px-3 py-2 border border-gray-900',
                  'font-semibold rounded-md hover:bg-green-950 active:bg-gray-950',
                  'hover:border-green-950')}
                onClick={addItem(key)}>
                +
              </SecondaryButton>
              <SecondaryButton
                className={classNames('text-gray-400 bg-gray-900 px-3 py-2 border border-gray-900',
                  'font-semibold rounded-md hover:bg-gray-700 active:bg-gray-950')}
                onClick={moveItemDown(key)} disabled={key === values.length - 1}>
                v
              </SecondaryButton>
            </div>
          </div>
        ))}
      </div>
      <SecondaryButton className='mt-4' onClick={addToBottom}>
        Add To Bottom
      </SecondaryButton>
    </>
  );
};

EditableList.propTypes = {
  label: PropTypes.string,
  elements: PropTypes.array,
};

内容的提问来源于stack exchange，提问作者code writer 3000