javascript - this.state.[object].map 不是函数

Question

我敢打赌我错过了一些微不足道的东西，但由于某种原因，我得到了

this.state.iata.map is not a function

，即使我已将此上下文绑定(bind)到需要使用该状态的所有函数。另外，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 Code 正在识别该状态的状态和映射函数，这意味着代码应该没问题，但正如我所说，我可能错过了一些微不足道的东西，而且我看不到什么。

非常感谢您的帮助。

Answer 1

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

1. 为什么不像这样导入文件顶部的 JSON 文件？ 然后您可以直接在渲染方法中使用它，如下所示:

import iataData from '../../assets/iata-codes.json'
...
return (
  <Select>
    {iataData.map(data => 
      <MenuItem key={data.response.code}>{data.response.name}</MenuItem> 
    }
  </Select>
)

您可以放弃整个状态并更新状态。这不是必需的。但是...如果您确实需要状态，请检查以下内容。

由于这行代码，您会收到错误

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

您实际上并没有“调用”该函数 -> {iata: this.getIATACodes()}。所以你不能对函数引用执行 array.map() 。 function.map() 不起作用。

您实际上并没有解析正确的东西。

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

您正在尝试解析字符串“../../assets/iata-codes.json”，这显然会导致类型错误

Uncaught SyntaxError: Unexpected token . in JSON at position 0

希望这能为您解决问题。