Javascript 此.state.[object].map不是函数

我打赌我错过了一些琐碎的事情，但出于某种原因，我变得

此.state.iata.map不是函数

，即使我已将此上下文绑定到需要使用该状态的所有函数。另外，iata state是一个数组，所以我认为使用map函数没有问题

代码如下：

import React from 'react';
import { Select, MenuItem } from '@material-ui/core/Select';

export default class IATACodesSelect extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            iata: []
        }   

        this.changeIATAState = this.changeIATAState.bind(this);
        this.renderIATACodes = this.renderIATACodes.bind(this);
    }

    componentWillMount() {
        this.changeIATAState();
    }

    changeIATAState = () => {
        this.setState({iata: this.getIATACodes});
    }

    getIATACodes = () => {
        return JSON.parse("../../assets/iata-codes.json");
    }

    renderIATACodes = () => {
        return this.state.iata.map(data => 
            <MenuItem key={data.response.code}>{data.response.name}</MenuItem>
        )
    }

    render() {
        return(
            <Select>
                {this.renderIATACodes()}
            </Select>
        );
    }
}

VS代码同时识别该状态的状态和映射函数，这意味着代码应该是可以的，但正如我所说的，我可能遗漏了一些琐碎的东西，我看不到什么

非常感谢您的帮助。

EDIT 在getIATACodes中，您正在解析字符串.././assets/iata-codes.json，而不是实际的json

这样做：

      getIATACodes = () => {

        fetch("/assets/iata-codes.json")
          .then((res)=> res.json())
          .then((res) => {
            this.setState({
             iata : res
            })
          })
      }

这个片段：

getIATACodes = () => {
    const { response } = JSON.parse("../../assets/iata-codes.json");
    return response;
}

您确定iata-codes.json是有效的数组，例如：

[
 {id: 1, code: 'code 1'}, 
 {id: 2, code: 'code 2'}
]

---

对我来说，有几个明显的问题

为什么不这样导入文件顶部的JSON文件？ 然后，您可以直接在渲染方法中使用它，如下所示： 您实际上没有调用函数->{iata:this.getIATACodes}。因此，不能对函数引用执行array.map。function.map不起作用

实际上，您没有解析正确的内容。 您正在尝试解析字符串.././assets/iata-codes.json，这显然会导致类型错误

Uncaught SyntaxError: Unexpected token . in JSON at position 0

---

希望这能为您解决问题。

我们不能直接映射对象。你的问题就在这里。您试图直接映射到json对象。如果你试试这个

  renderIATACodes = () => {
    let keys= Object.keys(this.state.iata)
    return keys.map(key =>
      <MenuItem key={this.state.iata[key].code}>{this.state.iata[key].name}</MenuItem>
    )
  }

---

你的问题会解决的。你需要绝对遵循@Sam Uherek的步骤。

第一件事是你不需要绑定它，因为你的函数是箭头函数，第二个日志getIATAcode函数可能你没有得到arrayuse{this.renderIATACodes}我肯定json是有效的数组。这是json的一个片段：这没有帮助。错误仍然是一样的。这是我从第一个建议中得到的：未捕获类型错误：资产\u iata\u代码\u json\u网页包\u导入的模块\u 2。映射不是function@Ryukote我懂了。您需要添加一个加载器，或者只是将文件类型包含到您的webpack配置中，这样就可以导入JSON文件并立即解析它。你有自定义的网页包配置吗？或者您正在使用CreateReact应用程序？在那之后，它肯定会工作。我正在使用create react应用程序，在这个项目中我一次都没有接触过网页配置。@Ryukote我需要实际访问代码才能了解为什么会发生这种情况。create react应用程序在json导入方面没有任何问题。要么没有导入正确的文件，要么JSON基文件中没有数组，要么配置混乱。看看这里。它很好用。尝试比较，或者尝试导入它，但最后不使用.json。

JSON.parse("../../assets/iata-codes.json");

Uncaught SyntaxError: Unexpected token . in JSON at position 0

  renderIATACodes = () => {
    let keys= Object.keys(this.state.iata)
    return keys.map(key =>
      <MenuItem key={this.state.iata[key].code}>{this.state.iata[key].name}</MenuItem>
    )
  }