在 React 中將變量傳遞給 axios 請求

Question

我有這個 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

Answer 1

來自 MDN 文檔：

bind()方法創建一個新的 function，當調用它時，它的 this 關鍵字設置為提供的值，當調用新的 ZC1C425268E68385D1AB5074C17A94F1 時，給定的 arguments 序列在任何提供的序列之前。

bind 的第一個參數是上下文（this 的值），在您當前的場景中，您可以將其設置為 null。

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

或者您可以使用箭頭 function

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