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)
}

希望有帮助

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

1 个答案: