javascript - 使用 React 删除节点并用数组中的项目替换到同一节点位置

Question

我有一个返回 20 个项目的 API 端点。我调用电话并将这些项目存储为一个数组，称为我的“项目”在状态上。我想一次显示 4 个项目，然后当用户单击特定节点时，它将从显示的列表中删除该项目，并将其替换为数组中尚未使用的另一个项目。

我面临的棘手部分是引用该项目已被删除的确切位置。例如，如果从我的 4 个项目中单击要删除的项目 2，我想随机选择一个尚未使用的项目并将其添加到项目 2 所在的位置，而不是将所有内容向上滑动并使其成为项目 4 .

我该如何去做呢？感谢您的帮助。

----- 答案 -------

感谢大家，特别是@wdm，让我朝着正确的方向前进。它回答了我的大部分问题，但它循环了结果。我想选择未使用过的项目。

我向状态添加了更多功能，以便跟踪正在显示的项目和已使用的项目。

注意:我调整了“replaceItem”方法，因为 while 循环到达列表末尾后会发生内存泄漏。 else 语句在我们已经显示了每一项之后运行，因此可以继续并开始将它们从向用户显示的位置中删除。

state = {
        companies: [
            { id: 1, name: "Chris" },
            { id: 2, name: "Ringo" },
            { id: 3, name: "John" },
            { id: 4, name: "Marty" },
            { id: 5, name: "Beetlejuice" },
            { id: 6, name: "Dwayne" },
            { id: 7, name: "Spud" },
            { id: 8, name: "Ant" },
            { id: 9, name: "Spaghetti" },
            { id: 10, name: "Meatballs" }
        ],
        items: [],
        usedItems: []
    };

    componentDidMount() {
        this.generateList();
    }

    generateList = () => {
        const { companies } = this.state;
        let items = Object.keys(companies.slice(0, 4));

        this.setState({
            items,
            usedItems: items
        });
    };

    replaceItem = i => {
        const { companies, items, usedItems } = this.state;
        let newItem = null;

        if (companies.length !== usedItems.length) {
            while (newItem === null) {
                let newCount = Math.floor(
                    Math.random() * companies.length
                ).toString();

                if (usedItems.indexOf(newCount) === -1) {
                    newItem = newCount;
                }
            }

            let newItems = [...items];
            newItems[i] = newItem;
            this.setState(prevState => {
                return {
                    items: newItems,
                    usedItems: [...prevState.usedItems, newItem]
                };
            });
        } else {
            this.setState(prevState => {
                return {
                    items: prevState.items.filter(
                        item => items.indexOf(item) !== i
                    )
                };
            });
        }
    };

Answer 1

1. 在 state 中存储一个单独的数组，其中包含显示的 items 的索引，例如 displayedItems: [2, 5, 11, 9]。
2. 为节点设置一个 onClick 事件。此事件应从 items 中选择一个与 displayedItems 中的任何索引都不匹配的索引，然后用这个新索引替换 displayedItems 中的相应索引.
3. 这应该会触发重新渲染，因为状态发生了变化并且您的列表应该更新。

现场演示:https://codesandbox.io/embed/1y92qn9pq3?hidenavigation=1

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: ["Alpha", "Beta", "Gamma", "Delta", "Epsilon", "Zeta"],
            selectedItems: []
        };
    }
    componentDidMount() {
        this.populateList();
    }
    populateList = () => {
        const { items } = this.state;
        let selectedItems = [];
        while (selectedItems.length < 4) {
            const item = Math.floor(Math.random() * items.length);
            if (selectedItems.indexOf(item) === -1) {
                selectedItems.push(item);
            }
        }
        this.setState({ selectedItems });
    };
    replaceItem = key => {
        const { items, selectedItems } = this.state;
        let newItem = null;
        while (newItem === null) {
            const item = Math.floor(Math.random() * items.length);
            if (selectedItems.indexOf(item) === -1) {
                newItem = item;
            }
        }
        let newSelectedItems = [...selectedItems];
        newSelectedItems[key] = newItem;
        this.setState({ selectedItems: newSelectedItems });
    };
    render() {
        return (
            <div className="App">
                <ul>
                    {this.state.selectedItems.map((val, key) => (
                        <li
                            className="item"
                            key={key}
                            onClick={() => this.replaceItem(key)}
                            >
                                {this.state.items[val]}
                            </li>
                        ))}
                    </ul>
                </div>
            );
        }
    }