React Hooks - 对对象进行排序时组件不更新答案

【问题标题】：React Hooks - Component not updating when object is sortedReact Hooks - 对对象进行排序时组件不更新
【发布时间】：2019-10-05 13:11:08
【问题描述】：

所以，我正在尝试按位置按字母顺序对我的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;

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

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

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

希望对你有帮助

【讨论】：