0

Компонент должен обладать следующей функциональностью:

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

Насколько можно видеть, пользователь нажимает на определённые объекты, чтобы поднять их чуть повыше. Однако проблема возникает на этапе рендера - список просто оказывается пустым и не отображается (хотя данные приходят и даже записываются в state, что я проверил).

Возможно, я устанавливаю значение в useState() неверным способом. Как мне сделать правильно?

1 ответ 1

1

При передаче массива объектов в state, функциональный компонент не отслеживает изменения внутри объектов, а отслеживает только изменение самого входного значения. Т.е вам нужно передать в setSortableObjects новый массив данных, а не тот же массив, но в котором изменились данные. Это будет выглядеть вот так:

setSortableObjects([...sortableObjects]);

Ссылка на песочницу

1
  • Да, я до вашего ответа добился похожего эффекта (я сортировал массив перед сохранением), но не очень понимал, почему оно так сработало:) Теперь понятно, sort() возвращал попросту новый массив.
    – Zhenyria
    17 июн 2021 в 12:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.