Question

我试图遍历从Ajax请求收到的对象数组。出于某种原因，即使我确定我的数据是一个数组，我也无法使用地图功能。我只是在学习React，并且知道必须有一些潜在的概念，我已经错过了但无法弄明白。

这是我的代码。

import React from 'react';
import axios from 'axios';

class Search extends React.Component {

constructor(props) {
 super(props); 
 this.state = {value: '', searchVal: 'No data yet'};
 this.handleChange = this.handleChange.bind(this);
 this.search = this.search.bind(this);
} 

search() {
  var val = this.state.value;
  var x = '';
  axios.post('/names', {
    search: val
  })
  .then((response) => {
    x = response.data;
    this.setState({searchVal:x})
  })
  .catch(function (error) {
    console.log(error);
  });  
}

handleChange(event) {
  this.setState({value: event.target.value});
}

render() {
 console.log(this.state.searchVal); // array of objects
 var results = this.state.searchVal;
 console.log(Array.isArray(results)) // logs true

return (
    <div>
        <label htmlFor="search">Search:</label>
        <input type="text" name="search" id="search-box" value=
 {this.state.value} onChange={this.handleChange}/>
        <button id="search" onClick={this.search}>Search</button>
        <p></p>

        <div id="search-results">
           <ul>
              {results.map( (el) => {return el.name})}  //error here ?

           </ul>
        </div>
    </div>
  )
 }
}

export default Search

Answer 1

你还没有打电话给search()。您将search()绑定到onClick，但在此之前，您的state.searchVal值为No data yet，因此它不是数组。

您可以在某个生命周期方法中调用search()，也可以在构造函数中为state.searchVal: []设置默认值

Answer 2

您需要更改searchVal的初始化

this.state = {value: '', searchVal: []};

第一次调用render（）函数时，searchVal仍然是一个String（＆＃39; No data yet＆＃39;），而不是数组，这就是为什么map不起作用的原因

.map不是一个函数

2 个答案: