Question

有人请帮助我。我收到此问题标题中描述的错误。我想将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;

Answer 1

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

阵列上有

Array#map 。

获取API调用后，

this.setState({data: json});

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

将其更改为：

this.setState({data: [...json]});

Answer 2

由于您的JSON结构如下：

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

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

Answer 3

您应该检查提取调用是否成功。在promise链的末尾添加.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

Answer 4

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); }您的班级props中缺少constructor

这应该让你开始，在使用地图功能

时不要忘记密钥

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

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

4 个答案: