Javascript 未捕获类型错误：data.map不是reactjs虚拟组件上的函数

我试图将字符串数组中的一些基本值呈现到一个虚拟react组件中。但我得到了这个错误：

代码如下：

import React, { Component } from 'react';

import { Row, Col } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper.js';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { adalApiFetch } from '../../adalConfig';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
        data: []
    };

  }

  getValues() {
    adalApiFetch(fetch, '/values', {})
      .then((response) => {

        // This is where you deal with your API response. In this case, we            
        // interpret the response as JSON, and then call `setState` with the
        // pretty-printed JSON-stringified object.
        response.json()
          .then((responseJson) => {
            this.setState({ data: JSON.stringify(responseJson, null, 2) })
          });
      })
      .catch((error) => {

        // Don't forget to handle errors!
        console.error(error);
      })

  }

  fetchData() {
    try {
        const data =  this.getValues();
        !this.isCancelled && this.setState({ data });
    } catch(error) {
        console.log(error);
    }
  }

  componentDidMount(){
    this.fetchData();
  }

  render() {
    const { data } = this.state;
    const { rowStyle, colStyle, gutter } = basicStyle;
    const radioStyle = {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      };
      const plainOptions = ['Apple', 'Pear', 'Orange'];
      const options = [
        { label: 'Apple', value: 'Apple' },
        { label: 'Pear', value: 'Pear' },
        { label: 'Orange', value: 'Orange' }
      ];
      const optionsWithDisabled = [
        { label: 'Apple', value: 'Apple' },
        { label: 'Pear', value: 'Pear' },
        { label: 'Orange', value: 'Orange', disabled: false }
      ];

    return (
      <div>
        <LayoutWrapper>
        <PageHeader>{<IntlMessages id="pageTitles.TenantAdministration" />}</PageHeader>
        <Row style={rowStyle} gutter={gutter} justify="start">
          <Col md={12} sm={12} xs={24} style={colStyle}>
            <Box
              title={<IntlMessages id="pageTitles.TenantAdministration" />}
              subtitle={<IntlMessages id="pageTitles.TenantAdministration" />}
            >
              <ContentHolder>
                  <ul>
                    {data && data.map(item => (
                        <li>{item.name}</li>
                    ))}
                  </ul>
              </ContentHolder>
            </Box>
          </Col>
        </Row>
      </LayoutWrapper>
      </div>
    );
  }
}

import React，{Component}来自'React'；
从“antd”导入{Row，Col}；
从“../../components/utility/PageHeader”导入PageHeader；
从“../../components/utility/Box”导入框；
从“../../components/utility/LayoutWrapper.js”导入LayoutWrapper；
从“../../components/utility/ContentHolder”导入ContentHolder；
从“../../settings/basicStyle”导入basicStyle；
从“../../components/utility/IntlMessages”导入IntlMessages；
从“../../adalConfig”导入{adalApiFetch}；
导出默认类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
};
}
getValues（）{
adalApiFetch（获取，'/values'，{}）
。然后（（响应）=>{
//这就是处理API响应的地方
//将响应解释为JSON，然后使用
//漂亮打印的JSON字符串化对象。
response.json（）
.然后（（responseJson）=>{
this.setState（{data:JSON.stringify（responseJson，null，2）}）
});
})
.catch（（错误）=>{
//别忘了处理错误！
控制台错误（error）；
})
}
fetchData（）{
试一试{
const data=this.getValues（）；
！this.isCancelled&&this.setState（{data}）；
}捕获（错误）{
console.log（错误）；
}
}
componentDidMount（）{
这是fetchData（）；
}
render（）{
const{data}=this.state；
const{rowStyle，colStyle，gutter}=basicStyle；
常数无线电样式={
显示：“块”，
高度：“30px”，
线宽：“30px”
};
const plainOptions=['Apple'、'Pear'、'Orange']；
常量选项=[
{标签：'Apple'，值：'Apple'}，
{标签：'Pear'，值：'Pear'}，
{标签：'Orange'，值：'Orange'}
];
const options with disabled=[
{标签：'Apple'，值：'Apple'}，
{标签：'Pear'，值：'Pear'}，
{标签：'Orange'，值：'Orange'，已禁用：false}
];
返回(
{}

{data&&data.map（项=>(
{item.name}
))}

);
}
}

由于试图对字符串使用数组方法

map

，因此出现错误。您不应该使用

JSON.stringify

字符串化响应，因为这将使

数据

成为字符串

fetchData

中的

try/catch

和

const data=this.getValues（）

也将不起作用，因为如果您返回承诺，

getValues

将是异步的

示例

class App extends Component {
  state = {
    data: []
  };

  fetchData = () => {
    adalApiFetch(fetch, "/values", {})
      .then(response => response.json())
      .then(responseJson => {
        if (!this.isCancelled) {
          this.setState({ data: responseJson });
        }
      })
      .catch(error => {
        console.error(error);
      });
  };

  componentDidMount() {
    this.fetchData();
  }

  render() {
    const { data } = this.state;
    const { rowStyle, colStyle, gutter } = basicStyle;
    const radioStyle = {
      display: "block",
      height: "30px",
      lineHeight: "30px"
    };
    const plainOptions = ["Apple", "Pear", "Orange"];
    const options = [
      { label: "Apple", value: "Apple" },
      { label: "Pear", value: "Pear" },
      { label: "Orange", value: "Orange" }
    ];
    const optionsWithDisabled = [
      { label: "Apple", value: "Apple" },
      { label: "Pear", value: "Pear" },
      { label: "Orange", value: "Orange", disabled: false }
    ];

    return (
      <div>
        <LayoutWrapper>
          <PageHeader>
            {<IntlMessages id="pageTitles.TenantAdministration" />}
          </PageHeader>
          <Row style={rowStyle} gutter={gutter} justify="start">
            <Col md={12} sm={12} xs={24} style={colStyle}>
              <Box
                title={<IntlMessages id="pageTitles.TenantAdministration" />}
                subtitle={<IntlMessages id="pageTitles.TenantAdministration" />}
              >
                <ContentHolder>
                  <ul>{data.map(item => <li>{item.name}</li>)}</ul>
                </ContentHolder>
              </Box>
            </Col>
          </Row>
        </LayoutWrapper>
      </div>
    );
  }
}

类应用程序扩展组件{
状态={
数据：[]
};
fetchData=（）=>{
adalApiFetch（fetch，“/values”，{}）
.then（response=>response.json（））
.然后（responseJson=>{
如果（！this.isCancelled）{
this.setState（{data:responseJson}）；
}
})
.catch（错误=>{
控制台错误（error）；
});
};
componentDidMount（）{
这是fetchData（）；
}
render（）{
const{data}=this.state；
const{rowStyle，colStyle，gutter}=basicStyle；
常数无线电样式={
显示：“块”，
高度：“30px”，
线宽：“30px”
};
const plainOptions=[“苹果”、“梨”、“橙色”]；
常量选项=[
{标签：“苹果”，价值：“苹果”}，
{标签：“Pear”，值：“Pear”}，
{标签：“橙色”，值：“橙色”}
];
const options with disabled=[
{标签：“苹果”，价值：“苹果”}，
{标签：“Pear”，值：“Pear”}，
{标签：“橙色”，值：“橙色”，禁用：false}
];
返回(
{}
{data.map（item=>
{item.name}
）}
);
}
}

在这种情况下，处理异常的正确方法是什么？如果您使用，可以使用

try/catch

，但如果您不想使用，可以使用

catch

，就像您在

getValues

中已经做过的那样。您在响应中严格化了，但提到我不应该，对吗？\我再次得到：TypeError:data.map不是一个函数