React Hooks - 对象排序时组件不更新

Question

所以，我试图data按位置按字母顺序对我的进行排序。我下面的内容似乎有效，并且我的控制台日志输出了正确的顺序 - 但是，我的组件似乎没有重新渲染。我不确定它是否只是没有重新渲染，或者是否useEffect正在启动并再次默认排序？对此很陌生，所以我不完全确定！

我已经尝试了以下内容，并进行了一些简单的文本更改，并且应用程序按预期更新。

不确定我哪里出错了？

任何帮助都会很棒。谢谢！

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {

    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios('/api/somestuff');
            setData(result.data.default.sort((a,b) => a.brand.localeCompare(b.brand)));
        };
        fetchData();
    }, []);

    const sortLocation = () => {
        setData(data.sort((a,b) => a.location.localeCompare(b.location)));
        console.log(data)
    }

    return (
        <>
            <button onClick={() => sortLocation()}>Sort by location</button>

            {data && data.map((item, index) => (
                <span key={index}>
                    <p>{item.brand}</p>
                    <p>{item.location}</p>
                </span>
            ))}
        </>
    );

}

export default App;

Answer 1

好吧，你在这里做的排序是就地排序，所以基本上它和以前一样的数组，因为数组是引用类型是Javascript，你需要创建一个新数组来更新状态，你可以这样做

const sortLocation = () => {
    const dataArray = [ ...data]
    setData(dataArray.sort((a,b) => a.location.localeCompare(b.location)));
    console.log(data)
}

希望能帮助到你