Question

我敢打赌，我错过了一些琐碎的事情，但是由于某种原因，我得到了

this.state.iata.map不是函数

，甚至我已经将此上下文绑定到需要使用该状态的所有函数。另外，由于iata状态是一个数组，所以我看不到使用map函数的问题。

代码如下：

toVC.view

VS Code可以同时识别状态和该状态的map函数，这意味着代码应该可以，但是正如我所说，我可能缺少一些琐碎的东西，我看不到。

我会很感激。

Answer 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

希望这可以为您清除一切。

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的步骤。

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

4 个答案:

编辑