在 React 中将变量传递给 axios 请求答案

【问题标题】：Passing a variable to an axios request in React在 React 中将变量传递给 axios 请求
【发布时间】：2020-10-17 22:17:21
【问题描述】：

我有这个 axios get 方法可以从端点检索用户拥有的所有播放列表：

getUserPlaylists() {
        axios
            .get("/v1/users/"+ JSON.parse(localStorage.getItem("user")).id +"/playlists", {headers: { Authorization: localStorage.getItem("apiKey") }})
            .then((response) => {
                var playlists = [];
                for (var i = 0; i < response.data.items.length; i++) {
                    playlists[i] = response.data.items[i];
                }
                console.log(response);
                this.setState({
                    playlists: playlists,
                });
            })
            .catch((error) => console.log("Get Error"));
    }

效果很好，我还编写了一个post 方法来将当前视频添加到播放列表使用videoID 和playlistID

addToPlaylist(playlistID){
        const uri = "/v1/users/"+ JSON.parse(localStorage.getItem("user")).id +"/playlists/"+ playlistID +"/videos"
      axios
          .post(uri, {id: window.location.href.substring(28) }, {headers: { Authorization: localStorage.getItem("apiKey") }})
          .then((response) => {
              console.log(response);
          })
          .catch((error) => console.log("Get Error"));
    }

我尝试在render方法中调用post方法如下：

{this.state.playlists.map((playlist) => (<ul key={playlist.id}><Button type="button" className="btn btn-primary" onClick={this.addToPlaylist.bind(playlist.id)}>Add video to Playlist <b><i>{playlist.name}</i></b></Button></ul>))}

一切正常，除了当我单击按钮调用post 方法时，我收到以下错误

POST http://localhost:3000/v1/users/867/playlists/[object%20Object]/videos 404 (Not Found)

我不明白为什么post 方法没有正确获取playlistID

【问题讨论】：

.bind(playlist.id) 在函数内部创建了 this 的值。参数是点击事件。
如何将参数改为playlist.id ?

标签： javascript reactjs http post axios

【解决方案1】：

来自 MDN 文档：

bind() 方法会创建一个新函数，在调用该函数时，会将其 this 关键字设置为提供的值，并在调用新函数时将给定的参数序列放在任何提供的参数之前。

bind 的第一个参数是上下文（this 的值），在您当前的场景中，您可以将其设置为 null。

onClick={this.addToPlaylist.bind(null, playlist.id)}

或者你可以使用箭头函数

onClick={() => this.addToPlaylist(playlist.id)}

【讨论】：