Question

我有一个问题，this.state.languages是对象数组，因此会以[{"ID":1,"NAME":"Deutsch","SHORT_NAME":"de"},{"ID":2,"NAME":"English","SHORT_NAME":"en"}]的形式反应，但是当我尝试使用this.state.languages[1]访问第一个元素时，它只是以{{ 1}}。当我尝试使用{时，出现以下错误：this.state.languages.map(...)。
TypeError: this.state.languages.map is not a function是一个数组，其中包含具有属性this.state.languages的对象
我尝试使用以下方法呈现数组和属性：

ID, NAME, SHORT_NAME

这是我的答复。杰森：export default class App extends Component{ constructor(props){ super(props); this.state = { languages: [] }; } componentDidMount(){ fetch("http://localhost:8080/data/sprachen") .then(response => response.json()) .then(responseJson => { this.setState({ languages: responseJson.data }); }) } render(){ return( <div className="container"> <p>{this.state.languages}</p> {this.state.languages.map(function(i, item){ return <li key={i}>{item}</li> })} </div> ) } }

Answer 1

response.json()应该直接为您提供JSON对象（它不应位于data子键中）。因此正确的代码应为：

.then(responseJson => {
    this.setState({ languages: responseJson });
})

Answer 2

map函数将当前值作为第一个参数，将索引作为第二个参数

此外，在渲染子代时也不建议使用索引作为键，因为它会影响性能。我不明白您的确切要求。我已包含一些代码以供参考

render() {
    return(
      <div className="container">
          <ul>
            {this.state.languages.map((item, index) => <li key={item.id}>{item.NAME}</li>)}
          </ul>
      </div>
    )
}

从React中的对象数组中渲染对象

2 个答案: