如何正确初始化useState？

该组件必须具有以下功能：

1. 从服务器获取对象列表。
2. 允许用户对结果列表进行排序（同时在本地保存更改state而不将它们发送到服务器）
3. 更改后，可以将列表发送到服务器以保存更改。

对象如下所示：

{
    id: 1,
    name: 'Fruit',
    sortNum: 123
}

存在渲染问题。这是组件：

const UpdateList = ({objects, setObjects, closeObjects}) => {

    useEffect(() => {
        setObjects();
        return () => closeObjects();
    }, []);

    let [sortableObjects, setSortableObjects] = useState(
        objects && objects
            .map(o => ({
                        id: o.id,
                        name: o.name,
                        sortNum: o.sortNum
                      })
            )
            .sort((o, o1) => o.sortNum - o1.sortNum));

    const swapElements = (firstObject, secondObject) => {
        const sortNum = firstObject.sortNum;
        firstObject.sortNum = secondObject.sortNum;
        secondObject.sortNum = sortNum;
    }

    const moveUp = (index) => {
        if (index > 0) {
            swapElements(sortableObjects[index], sortableObjects[index - 1]);
            setSortableObjects(sortableObjects);
        }
    }

    return (
        <div>
            {sortableObjects && sortableObjects
                .sort((o, o1) => o.sortNum - o1.sortNum)
                .map((o, index) => <div key={o.id} onClick={() => moveUp(index)}>{o.name}</div>)}
        </div>
    );
}

const mapStateToProps = (state) => ({objects: state.objects});

export default connect(mapStateToProps, {setObjects, closeObjects})(UpdateList);

如您所见，用户单击某些对象以将它们抬高一点。但是，问题出现在渲染阶段 - 列表只是空的并且没有显示（尽管数据来了，甚至写入了我检查过的状态）。

也许我以useState()错误的方式设置值。我怎样才能做到正确？