setState не устанавливает значения

Question

Мы получили интерфейс ReactJS для нашего школьного проекта.Для этого мы должны сделать бэкэнд Laravel.Я использую API для извлечения макета панели мониторинга из базы данных.Текущий интерфейс использует эту переменную:

const originalLayouts = getFromLS("layouts") || [];

Чтобы установить состояние из локального хранилища с помощью этой функции:

function getFromLS(key) {
    let ls = {};
    if (global.localStorage) {
        try {
            ls = JSON.parse(global.localStorage.getItem("rgl-8")) || {};
        } catch (e) {
            /*Ignore*/
        }
    }
    return ls[key];
}

Где установлены состояния:

this.state = {
            items: originalLayouts.map(function(i, key, list) {
                return {
                    i: originalLayouts[key].i,
                    x: originalLayouts[key].x,
                    y: originalLayouts[key].y,
                    w: originalLayouts[key].w,
                    h: originalLayouts[key].h,
                    widget: originalLayouts[key].widget,
                    minW: originalLayouts[key].minW,
                    minH: originalLayouts[key].minH,
                    maxH: originalLayouts[key].maxH
                };
            }),
            selectedOption: '',
            newCounter: originalLayouts.length
        };

Чтобы извлечь данные из базы данных и поместить данные в состояние элементов, я сделал эту функцию:

loadData = () => {

        let dashboardId = 1;

        return axios
            .get('api/dashboards/' + dashboardId)
                .then(result => {
                    console.log(result);
                    this.setState({
                        originalLayouts: result.data,
                        selectedOption: '',
                        newCounter: originalLayouts.length
                    });
                    console.log(result.data);
                })
                .catch(error => {
                    console.error('error: ', error);
                })
    };

И я вызываю эту функцию в componentDidMount:

componentDidMount() {
    this.loadData();
}

Когда я консоль журнала результатов, он показывает мне это:

 data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
data: (2) [{…}, {…}]
headers: {date: "Tue, 23 Oct 2018 08:18:41 +0000, Tue, 23 Oct 2018 08:18:41 GMT", host: "127.0.0.1:8000", x-powered-by: "PHP/7.2.3", x-ratelimit-remaining: "58", content-type: "application/json", …}
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: "OK"
__proto__: Object

И когда я консоль журнала результатов.данных я получаю:

(2) [{…}, {…}]
0: {id: 1, dashboardId: 1, w: 2, h: 5, x: 0, …}
1: {id: 2, dashboardId: 1, w: 2, h: 1, x: 0, …}
length: 2
__proto__: Array(0)

Почему оригиналLayouts не устанавливается с данными из массивов?Это потому, что в моих массивах также есть dashboardId и id?Я также подумал, что это может быть что-то с установкой состояний, потому что это делает использование оригинальных Layout достоверным.Или я все еще что-то упускаю в своей функции?Я не очень опытен с React, поэтому любая помощь полезна.

Обновление:

Я изменил:

this.setState({
    originalLayouts: result.data,
    selectedOption: '',
    newCounter: originalLayouts.length
});

на:

this.setState({
    items: result.data,
    selectedOption: '',
    newCounter: originalLayouts.length
});

Это дает мне эту ошибку:

Uncaught Error: ReactGridLayout: ReactGridLayout.children[0].static must be a boolean!

Так что это, вероятно, означает, что я сейчас неправильно устанавливаю свойства.

Обновление 2:

В моей базе данных свойства moved и static были сохранены как 0 вместо false.Поэтому я изменил эти свойства на false, но все равно получил ту же ошибку:

ReactGridLayout: ReactGridLayout.children[0].static must be a boolean!

Answer 1

В вашем loadData () вы устанавливаете состояние «originalLayouts», но ваш ключ в исходном состоянии - «items».Вы пытались это сделать?

this.setState({
                items: result.data, // Here put items instead of originalLayouts
                selectedOption: '',
                newCounter: originalLayouts.length
              });

Затем вы можете позвонить this.state.items, чтобы получить ваш результат. Данные