Question

clickMusicHandler() {

    //console.log(this.props.channel);

    axios.put('/channels/'+'test', {

        playList: {
            songName: this.props.track.name,
            artist: this.props.track.artists[0].name,
            url: this.props.track.preview_url
        }
    })
        .then((res)=>{

            //set state

        console.log("added song");
    }).catch((err)=>{
        console.log(err);
    });   

}

在名为SongList的组件中，我希望在单击组件this.props.track.preview_url的项目时将SongList传递给使用此组件的其他组件。上面的代码是SongList项的单击处理程序。

我想将this.props.track.preview_url添加到使用此组件的组件的本地数组中。

在使用SongList的组件中，它看起来像：

    const mapToComponents = (data) => {

        if(this.state.keyword == '') return [];

        return data.map((eachData, index) => {
            return (  <SongList track = { eachData } key={ index }/>  );
        });
    };

如何使用SongList将点击的this.testSongList = [];项的网址添加到组件SongList的本地数组？

Answer 1

此问题解决了如何将数据从子组件传递到其父组件：How to pass data from child component to its parent in ReactJS?

在您的情况下，您可以将clickMusicHandler作为道具传递给SongList，以更新父组件。

但是，如果您希望状态在多个组件中保持一致，我建议使用Redux。 Redux是一个JS状态容器，允许您将props绑定到状态变量。当您运行单击处理程序时，将新preview_url分派给商店，而您的其他组件将使用新值自动重新呈现。

Getting Started with Redux

将prop传递给reactJS中的不同组件

1 个答案: