在 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当前视频添加到播放列表videoIDplaylistIDaddToPlaylist(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, playlist.id)}

或者您可以使用箭头功能

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