setState不设置值

Question

我们为我们的学校项目提供了一个ReactJS前端。我们得为它做一个拉拉维尔的后端。我使用一个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
        };

为了从数据库中获取数据并将数据放入items状态，我执行了以下函数：

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

当我控制台日志result.data时，我得到：

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

为什么originalLayouts不使用数组中的数据进行设置？这是因为我的数组中也有一个dashboardId和id吗？我还认为它可以设置状态，因为它使用了可验证的originalLayouts。还是我还在我的职责中遗漏了什么？我的反应不是很有经验，所以任何帮助都是有用的。

更新：

我改变了：

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来得到你的result.data