this.state。[object] .map不是函數

Question

我敢打賭我缺少一些瑣碎的東西，但是由於某種原因，我越來越

this.state.iata.map不是函數

，甚至我已將此上下文綁定到需要使用該狀態的所有函數。 另外，iata狀態是一個數組，因此我看不到使用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可以同時識別狀態和該狀態的map函數，這意味着代碼應該可以，但是正如我所說，我可能缺少一些瑣碎的東西，我看不到。

我會很感激的。

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

您可以拋棄整個狀態以及更新狀態。 這不是必需的。 但是...如果您確實需要狀態，請檢查以下內容。

2. 您由於此行代碼而收到錯誤

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

您實際上並不是在“調用”函數-> {iata: this.getIATACodes()} 。 因此，您不能在函數引用上執行array.map() 。 function.map()不起作用。

3. 您實際上並不是在解析正確的東西。

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

您正在嘗試解析字符串"../../assets/iata-codes.json" ，這顯然會導致類型錯誤

Uncaught SyntaxError: Unexpected token . in JSON at position 0

希望這可以為您清除一切。

Answer 2

編輯

在getIATACodes中，您正在解析字符串“ ../../assets/iata-codes.json”，而不是實際的JSON

做這樣的事情：

      getIATACodes = () => {

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

Answer 3

此代碼段：

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

您確定iata-codes.json是有效數組，例如：

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

Answer 4

我們不能直接映射對象。 你的問題在這里。 您嘗試直接映射到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的步驟。