React组件列表增删索引失效问题排查及key用法确认

问题描述 #

我是JavaScript和ReactJS新手，尝试实现如下可动态增删的组件列表：

import React, { useState, useEffect, useRef } from "react";
import "./App.css";

function GenreBox() {
    let [input, setInput] = useState('')
    let [repr, setRepr] = useState('')

    let getClick = () => {
        fetch(`/genre/${input}`).then(
            (res) => res.json().then(
                (data) => { console.log(data); setRepr(data.repr) }
            )
        )
    }

    return (<div>
        <input type="text" value={input} onChange={(e) => setInput(e.target.value)}></input>
        <button onClick={getClick}>Get</button>
        <p>repr: {repr}</p>
    </div>
    )
}

function GenreBoxList() {
    let [genreBoxList, setGenreBoxList] = useState([])
    let [index, setIndex] = useState(0)

    let insertGenreBox = (e) => {
        e.preventDefault();
        console.log(index);
        let t = [...genreBoxList];
        t.splice(index, 0, <GenreBox />);
        console.log(t);
        setGenreBoxList(t);
    }
    let removeGenreBox = (e) => {
        e.preventDefault();
        let t = [...genreBoxList];
        t.splice(index, 1);
        console.log(t);
        setGenreBoxList(t);
    }
    let indexChange = (e) => {
        e.preventDefault();
        setIndex(e.target.value)
    }
    return (<div>
        <button onClick={insertGenreBox}>+</button>
        <button onClick={removeGenreBox}>-</button>
        <input type='number' value={index} onChange={indexChange} />
        <ol>
            {genreBoxList.map((x) => <li>{x}</li>)}
        </ol>
    </div>)
}

export { GenreBox, GenreBoxList }

当设置index为0并点击+/-按钮时，预期修改列表头部，但无论设置哪个索引值，操作始终作用于列表尾部。请问哪里出错了，或者这是不良设计实践吗？

自我排查与修改 #

编辑1 #

看来是key属性的问题，React似乎会将相同类型和key的对象视为相等，因此不会更新页面。

编辑2 #

我现在已为<GenreBox>和<li>添加了key，功能似乎正常了。请问这就是React推荐的用法吗？

修改后的代码：

function GenreBoxList() {
    let [genreBoxList, setGenreBoxList] = useState([])
    let [index, setIndex] = useState(0)
    let [counter, setCounter] = useState(0)

    let insertGenreBox = (e) => {
        e.preventDefault();
        console.log(index);
        let t = [...genreBoxList];
        t.splice(index, 0, <GenreBox key={counter} ></GenreBox>);
        setCounter(counter + 1);
        console.log(t);
        setGenreBoxList(t);
    }
    let removeGenreBox = (e) => {
        e.preventDefault();
        let t = [...genreBoxList];
        t.splice(index, 1);
        console.log(t);
        setGenreBoxList(t);
    }
    let indexChange = (e) => {
        e.preventDefault();
        setIndex(e.target.value)
    }
    return (<div>
        <button onClick={insertGenreBox}>+</button>
        <button onClick={removeGenreBox}>-</button>
        <input type='number' value={index} onChange={indexChange} />
        <ol>
            {genreBoxList.map((x) => <li key={x.key}>{x}</li>)}
        </ol>
    </div>)
}

解答与优化 #

问题根源 #

你最初的问题确实是因为缺少唯一key属性导致的。React在渲染列表时，依赖key来识别每个组件的唯一性，从而高效地更新DOM。当列表项没有显式设置key时，React会默认使用数组索引作为隐式key，这会导致在插入/删除非尾部元素时，React无法正确识别组件的位置变化，进而出现DOM更新不符合预期的情况——比如你看到的操作始终作用于尾部。

关于key的正确用法 #

你添加key的思路是对的，这确实是React处理列表渲染的核心要求，但还有一些细节可以优化，更贴合React的推荐规范：

• 不要使用数组索引作为key：如果列表的顺序会发生变化（比如插入、删除操作），用索引当key会导致React重新渲染错误的组件，引发状态混乱。你用自增counter作为key是可行的方案，因为它能保证每个组件的key唯一且稳定。
• key的位置要正确：key应该直接加在循环渲染的组件上，也就是<GenreBox>上，<li>的key可以复用这个值，确保整个列表项的唯一性。

优化建议：存储数据而非React元素 #

当前你直接把<GenreBox>元素存在state里，这并非最佳实践。更好的方式是存储组件的唯一标识数据，在渲染时再动态生成组件，这样state的管理更清晰，也更符合React的数据流理念：

function GenreBoxList() {
    const [genreBoxIds, setGenreBoxIds] = useState([])
    const [index, setIndex] = useState(0)
    const [counter, setCounter] = useState(0)

    const insertGenreBox = (e) => {
        e.preventDefault();
        const newIds = [...genreBoxIds];
        newIds.splice(index, 0, counter);
        setGenreBoxIds(newIds);
        setCounter(counter + 1);
    }

    const removeGenreBox = (e) => {
        e.preventDefault();
        const newIds = [...genreBoxIds];
        newIds.splice(index, 1);
        setGenreBoxIds(newIds);
    }

    const indexChange = (e) => {
        e.preventDefault();
        // 转换为数字类型，避免字符串索引导致的逻辑错误
        setIndex(Number(e.target.value));
    }

    return (
        <div>
            <button onClick={insertGenreBox}>+</button>
            <button onClick={removeGenreBox}>-</button>
            <input type='number' value={index} onChange={indexChange} />
            <ol>
                {genreBoxIds.map(id => (
                    <li key={id}>
                        <GenreBox key={id} />
                    </li>
                ))}
            </ol>
        </div>
    )
}

这样state里只存储唯一的id，渲染时根据id生成组件，不仅更易维护，也能避免直接存储React元素可能带来的潜在问题。

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