React 重新渲染“错误”数据

Question

我有一个 React 应用程序，其中包含一个从 API 获取数据并呈现它的列表。单击按钮即可更新此列表（获取更多数据）。我希望在“新”数据进入之前清除列表。 因为我的问题是在一个相当大的应用程序中，所以我尝试抽象地解释它： 这是我当前的（抽象）代码：

import React, { useState } from 'react'

const MyList = () => {

    const agesToFetch = [18, 19, 20, 21]
    const [listItems, setListItems] = useState({ "test1": false, "test2": true })

    const updateList = () => {
        // clearing list
        setListItems({})

        agesToFetch.forEach(age => {
            // AJAX request (sending age and some form input and recieving a name with a boolean)
            // for different inputs different results (simulated with random number)
            const result1 = {}
            result1["test" + Math.random().toString().substr(15)] = false
            setListItems({...listItems, result1}) // but here it takes the old already removed state value :(

            const result2 = {}
            result2["secondstest" + Math.random().toString().substr(15)] = false
            setListItems({...listItems, result2}) // here too
        })
    }

    return (
        <>
            <button onClick={updateList}>Update</button>
            < table >
                <thead>
                    <tr>
                        <th>Name </th>
                        < th > reachable </th>
                    </tr>
                </thead>
                < tbody >
                    {
                        Object.keys(listItems).map(name => {
                            const reachable = listItems[name]
                            return (
                                <tr style={{ "opacity": reachable ? "1" : "0.5" }
                                }>
                                    <td>{name} </td>
                                    < td > {reachable ? "reachable" : "NOT reachable"} </td>
                                </tr>
                            )
                        }
                        )
                    }
                </tbody>
            </table>
        </>
    )
}

export default MyList

状态在开始时有一些值并被清除，但该函数使用状态值（尚未清除）。因此，在本例中为 test1 和 test2 的“旧”值。

如何防止这种情况发生？

Answer 1

您没有正确设置状态，您应该使用 prev 进行设置：

    setListItems(prevState => ({
            ...prevState,
            result1
        }));