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

当我控制台记录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)

为什么未对原始数据设置数组中的数据？这是因为我的数组中也有dashboardId和id吗？我还认为这可能与设置状态有关，因为它充分利用了originalLayouts。还是我的功能中仍然缺少某些东西？我对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来获取结果。数据

setState未设置值

1 个答案: