如何在反应中使用赋值或函数获取数据？

Question

我有一个获取数据的组件。

这是我的代码:-

class HomePage extends Component{

constructor(props) {
  super(props)
  this.state = {
      eminem: []
  }
}

url = "https://deezerdevs-deezer.p.rapidapi.com/search?q=";

componentDidMount = () => {

        fetch(this.url + "eminem", {
            "method": "GET",
            "headers": {
                "Accept": "application/json",
                "x-rapidapi-host": "deezerdevs-deezer.p.rapidapi.com",
                "x-rapidapi-key": [key]
        }
        })
        .then((response) => response.json())
        .then((responseObject) => {
            console.log(responseObject);
            this.setState({ eminem : responseObject})
        }

        )

        .catch((err) => {
            this.setState({ error: true });
            console.log('An error occucred:', err);
        })   

}



 render(){
   return(
       <>
          <div className="col-12 col-md-9 offset-md-3 mainPage">
                <div className="row">
                    <div className="col-9 col-lg-11 mainLinks d-none d-md-flex">
                    <a href="#">TRENDING</a>
                    <a href="#">PODCAST</a>
                    <a href="#">MOODS AND GENRES</a>
                    <a href="#">NEW RELEASES</a>
                    <a href="#">DISCOVER</a>
                    </div>
                </div>

                <div className="row">
                    <div className="col-10">
                    <div id="rock">
                        <h2>Eminem</h2>
                       <div className='row'>
                           { this.state.eminem.data.forEach(item => {
                                <div className='col-3'>{item.title}</div>
                           })}

                       </div>
                    </div>
                    </div>
                </div>


                </div>

       </>
   )
 }


 } 

但我遇到了一个错误。期待一个赋值或函数调用，但却看到一个表达式 no-unused-expressions. 我不明白我错过了什么。并给我建议，我在react中要了解什么才能避免这样的错误。因为我是一个新手，想了解所有的概念。

Answer 1

你好，你可以用下面的方法替换你的componentDidMount处理程序，然后试试它是否能解决你的问题，因为我认为你使用了不合适的格式来定义该方法。

componentDidMount  () {

    fetch(this.url + "eminem", {
        "method": "GET",
        "headers": {
            "Accept": "application/json",
            "x-rapidapi-host": "deezerdevs-deezer.p.rapidapi.com",
            "x-rapidapi-key": [key]
    }
    })
    .then((response) => response.json())
    .then((responseObject) => {
        console.log(responseObject);
        this.setState({ eminem : responseObject})
    }

    )

    .catch((err) => {
        this.setState({ error: true });
        console.log('An error occucred:', err);
    })   

}

并从循环中返回元素，就像这样。

{ this.state.eminem.data.map(item => <div className='col-3'>{item.title}</div>)}

Answer 2

首先: 由于你的初始状态是这样的。

this.state = {
    eminem: []
}

如果你的数据是在 responseObject.data 再改

this.setState({ eminem : responseObject})

至:

this.setState({ eminem : responseObject.data })

---

第二。

因为你没有从循环中返回任何东西，所以首先你需要修改 forEach 到 map 然后你需要从中返回JSX。

把这个改成:

{ 
    this.state.eminem.data.forEach(item => {
        <div className='col-3'>{item.title}</div>
    })
}

改为:

{ 
    this.state.eminem.map(item => { // <--- map
        return <div className='col-3'>{item.title}</div> // <--- Return
    })
}

OR (短版)

{ 
    this.state.eminem.map(item => <div className='col-3'>{item.title}</div>)
}