Question

我想将db中的“ referti”显示到我的select下拉列表中，但是我不断收到相同的错误“ this.state.referti.map不是一个函数”。这是代码：

  componentDidMount() {
   this.mostraReferti(account.id)
  }

 mostraReferti(id) {
     axios.get('http://localhost:8080/api/REFERTOs/' + id)
      .then(response => {
       this.setState({ referti: response.data }, () => {
         console.log("response.data", response.data)
            console.log("THIS.STATE", this.state)
          })        
      })
      .catch(err => console.log(err))
    }
 render() {
const refertiItems = this.state.referti.map((referti, i) => {
  return (
    <RefertiItems key={referti.hash_referto} item={referti} />
  )
})

<Label for="type" text="Referto" />
        <div className="custom-select">
      {refertiItems}
        </div>

现在，response.data是一个对象，但是当我将它存储在referti []状态时，console.log（“ THIS.STATE”）说它是一个数组，因此应该对其进行映射，但是我仍然得到“ this.state.referti.map”不是函数。 RefertiItems是：

    class RefertiItems extends Component {
    constructor(props) {
        super(props);
        this.state = {
            item: props.item
        } 
    }  

render(){
return (
    <div  className= "custom-select">
    <Label for="type" text="Codice Referto" />
    <select
      name="codiceReferto"
      placeholder="Selezionare Referto"
       onKeyPress={this.onEnter}     //allows you to move to the next panel with the enter key
      value={this.codiceReferto}
      onChange={this.handleInputChange}>
      <option default value="vuoto"></option>
          <option>{this.state.item.tipo_esame}- 
{this.state.item.data_esame}</option>
    </select>
    </div>
)}
 }

奇怪的是，一开始我会收到错误消息，并且页面无法加载，但是如果我重新加载代码，系统将呈现页面，并且我得到4种不同的选择，每个选择的内部值都不同。

Answer 1

这似乎是由您没有初始状态引起的问题。将以下内容添加到您的组件中，您的问题就会消失：

state = { referti: [] }

这将确保.map首先会捡起[]而不是undefined

Answer 2

使用条件渲染，因为// Sort highest first, lowest last averagesByName.sort(function(a, b) { return b.average - a.average })是一个setState进程，因此不能保证在调用render时数据将在那里，进行以下更改并且可以正常工作：

确保async是可迭代的，因为referti仅适用于map，所以会引发错误。另外，请确保将arrays设置为referti的{{1}}

示例沙箱：https://codesandbox.io/s/compassionate-worker-rk7z4?fontsize=14

您的状态对象：

[]

有条件的渲染：

initial state.

无法理解为什么map（）不是函数

2 个答案: