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

Question

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

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当前视频添加到播放列表videoIDplaylistID

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"));

    }

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

{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

Answer 1

来自 MDN 文档：bind()方法创建一个新函数，在调用该函数时，将其 this 关键字设置为提供的值，并在调用新函数时提供的任何参数之前具有给定的参数序列。bind 的第一个参数是上下文（this 的值），在您当前的场景中，您可以将其设置为 null。onClick={this.addToPlaylist.bind(null,&nbsp;playlist.id)}或者您可以使用箭头功能onClick={()&nbsp;=>&nbsp;this.addToPlaylist(playlist.id)}