为什么更改 state 后反应组件不呈现

Question

最好给你看我的代码，它是压缩的，所以不会花太多时间

const PropertiesList: FC = (estatesObject) => {
    const [estates, setEstates] = useState(Object.values(estatesObject))

    const filterEstatesUp = () => {
        // just sorting an array of objects
        const filteredEstates = estates.sort((a, b) => parseFloat(a.price) - parseFloat(b.price))
        setEstates(filteredEstates)
    }
    const filterEstatesDown = () => {
        // just sorting an array of objects
        const filteredEstates = estates.sort((a, b) => parseFloat(b.price) - parseFloat(a.price))
        setEstates(filteredEstates) 
    }

    return (
        <> 
            <div onClick={() => filterEstatesUp()}>up</div>
            <div onClick={() => filterEstatesDown()}>down</div>
            {estates.map((estate, index) => {
                return(
                    <PropertyCard key={index} {...estate}/>
                )
            })}
        </>
    )
}

所以问题是当我up n down单击这些 div 时 - 没有任何变化

更新 x：（我正在使用 next.js，如果这对某些事情有帮助的话）我根据您的建议更改了我的代码，但我得到了其他东西：现在 state 正在更改，但浏览器仍然以某种方式不向我显示另一个庄园订单，所以我看到了卡片保持旧秩序的庄园这是我更改的代码：

const PropertiesList: FC = (estatesObject) => {
    const [estates, setEstates] = useState(Object.values(estatesObject))

    const sortEstatesFromDown = () => {
        const sortedEstates = [...estates]
        sortedEstates.sort((a, b) => parseFloat(a.price) - parseFloat(b.price))
        console.log("FROM DOWN TO UP", sortedEstates)
        setEstates(sortedEstates)
    }

    const sortEstatesFromUp = () => {
        const sortedEstates = [...estates]
        sortedEstates.sort((a, b) => parseFloat(b.price) - parseFloat(a.price))
        console.log("FROM UP TO DOWN", sortedEstates)
        setEstates(sortedEstates)
    }

    return (
        <> 
            <div onClick={() => sortEstatesFromDown()}>up</div>
            <div onClick={() => sortEstatesFromUp()}>down</div>
            {estates.map((estate) => {
                return(
                    <PropertyCard key={estate.id} {...estate}/>
                )
            })}
        </>
    )
}

MAX 价格为 3.000.000，MIN 为 180.000，但正如您依次单击两者后所见 - 没有再次改变，有来自服务器的通常订单

更新 x+1：这个 state 已经成功改变（你可以从控制台看到），但是浏览器没有改变卡片的顺序，为什么？

Answer 1

排序 function 不会创建新数组，它会改变旧数组。 所以你要重新排列现有的 state，然后用相同的数组设置 state。 因为它是同一个数组，反应认为 state 没有改变并跳过渲染。

const sortedEstates = [...estates];
sortedEstates.sort(...);

setEstates(sortedEstates);

Answer 2

现在你的代码只是改变你的estates数组，然后将相同的数组传递给setEstates function 所以没有任何改变，因为你将数组的相同引用传递给 function 并且 React 认为 state 不应该被改变所以它不会重新 -渲染组件。

解决方案如下所示：

const filterEstatesUp = () => {     
    setEstates((prevEstates) => {         
        const copiedEstates = [...prevEstates];         
        return copiedEstates.sort((a, b) => parseFloat(a.price) - parseFloat(b.price)); 
    }) 
}

在本例中，我使用了setState回调的方式，因为我正在更改依赖于之前的state的state，同时我也建议您使用它以避免冗余错误。

然后在回调 function 中，首先我复制了之前的estates数组，这意味着我正在创建一个具有相同元素的全新数组，之后，我排序并返回复制的数组。

根据更新，我会建议你使用estate.id作为键而不是索引，在你 map all estates 的地方，我认为问题隐藏在后面：

return (
    <> 
        <div onClick={() => sortEstatesFromDown()}>up</div>
        <div onClick={() => sortEstatesFromUp()}>down</div>
        {estates.map((estate, index) => {
            return(
                <PropertyCard key={estate.id} {...estate}/>
            )
        })}
    </>
)