2

- 有人可以帮我解决这个问题吗？我收到此问题标题中描述的错误。我想将 JSON 数据放入 react-grid-layout 组件中。这个库可以在（https://github.com/STRML/react-grid-layout）上找到

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Employee from './Employee'; 
import "./react-grid-layout/css/styles.css";
import "./react-resizable/css/styles.css"


var ReactGridLayout = require('react-grid-layout');

var data = [];

class MyFirstGrid extends React.Component {
    constructor() {
        super();
        this.state = {
            data: []
        };
    }

    componentDidMount(){
        fetch("http://localhost:8080/TrainingWebMvcSpring2/roottypes/listAll.do")
            .then( (response) => {
                return response.json() })
                    .then( (json) => {
                        this.setState({data: json});
                    });
    }


    render () {
        console.log(data);

        return (
            <ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}>
                {this.state.data.map(function(item, key){
                    return(
                        <div>
                        <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}> {item}</div>
                        <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}> {item} </div>
                        <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}> {item} </div>
                        </div>
                    )
                })}
            </ReactGridLayout>
        )
    }
}

export default MyFirstGrid;
4

4 回答 4

2

ReactJS：TypeError：this.state.data.map 不是函数？

Array#map在阵列上可用。

获取 API 调用后，

this.setState({data: json});

json作为对象而不是转换data 为对象的数组返回

将此更改为：

this.setState({data: [...json]});
于 2018-02-21T08:16:59.640 回答
1

由于您的 JSON 结构如下：

{
    array: [{},{},{}]
}

因此，以这种方式设置状态将解决您的问题this.setState({data: json.array});：

于 2018-02-21T09:33:26.243 回答
0

您应该检查 fetch 调用是否成功。在 Promise 链的末尾添加 a 是不够的.catch()（无论如何您都应该这样做），您还必须检查成功的调用是否返回了 OK 响应，而不是例如 404。像这样，例如：

class MyFirstGrid extends React.Component {
    constructor() {
        this.state = {
            data: []
        }
    }

    componentDidMount(){
        fetch('http://localhost:8080/JiwayTrainingWebMvcSpring2/roottypes/listAll.do')
            .then( (response) => {
                if (response.ok) {
                    return response.json()
                } else {
                    throw new Error(`Fetch failed with code ${response.code}`)
                }
            })
            .then(json => {
                this.setState({data: json})
            })
            .catch(err => { console.log(`Something failed: ${err.message}`) };
    }

    render () {
        console.log(this.state.data);
        return (
            <ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}>
                {this.state.data.map(function(item, key){
                    return(
                        <div>
                        <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}> {item}</div>
                        <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}> {item} </div>
                        <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}> {item} </div>
                        </div>
                    )
                })}
            </ReactGridLayout>
        )
    }
}

export default MyFirstGrid
于 2018-02-21T08:20:22.160 回答
0

var data = []是一个全局空数组。我没有看到你将它分配给其他任何东西，所以它总是一个空数组。console.log(data)也是如此[]。只是不要使用它。

response.json()与 相同JSON.parse(response.text())，它返回一个对象或对象数组。在你的情况下，由于没有map函数，我猜它返回一个对象。

将对象转换为数组的最简单方法是使用Object.keys()函数。

const keys = Object.keys(json); // eg: json = {a: 1, b: 2}
const data = keys.map(key => json[key]); // eg: data = [1, 2]
this.setState({ data: data });

由于您没有告诉我们您的 json 响应的结构，因此很难为您的问题提供具体的答案。

这是测试响应是否为对象数组的方法：

if (json.length) { /* array */ } 
eles { /* object will return undefined, which is false */ }

注意：刚看到你的评论。 this.setState({ data: json.array })应该做。

  • 您的代码中的另一个问题是constructor(props) { super(props); }The propsis missing in your classconstructor

这应该可以帮助您入门，使用地图功能时不要忘记密钥

class MyFirstGrid extends React.Component {
  state = { data: [] };

  async componentDidMount() {
    try {
      const response = await fetch("http://localhost:8080/TrainingWebMvcSpring2/roottypes/listAll.do");
      const data = response.json().array;
      console.log(data, data.length);
      this.setState({
        data: data,
      });
    } catch (err) {
      console.error(err);
    } 
  }

  render() {
    const dataGrid = this.state.data.map((item, index) => (
      <div key={index}>
        <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}> {item}</div>
        <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}> {item} </div>
        <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}> {item} </div>
      </div>
    ));

    return(
      <ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}>
        {dataGrid}
      </ReactGridLayout>
    );
  }
}
于 2018-02-21T08:56:15.247 回答