Question

我试着直接调用道具函数SORTINT，但它似乎不起作用：/

TypeError：无法读取未定义
的属性'props'

如何直接在子组件中调用父函数？

我想在没有任何事件处理程序的情况下更改父状态，例如this.props.setAuth();。我想在异步功能中这样做。是的。

任何替代方案都会有所帮助。谢谢：c

编辑：额外代码：

onClick={this.props.setAuth}

下面是class LoginPage extends Component { constructor(props){ super(props) this.state = {auth: false} this.setAuth = this.setAuth.bind(this) } setAuth() { this.setState({auth: true}) } <App setAuth={this.setAuth}/>组件，这是我想要调用道具功能的代码的一部分

App

（无用的代码） - onSignIn位于App组件

中

 onSignIn(googleUser) {

Answer 1

这里有一些例子：

我的索引文件有这个组件和这个函数：该组件将作为道具接收回调函数。

<ArtistsSearchList 
    onArtistSelect={
        current_artist =>this.setArtist(current_artist)
    }
    key={this.state.term}
    access_token=access_token}
    term={this.state.term} />

setArtist(current_artist){
        this.setState({
            current_artist,
            artist_image_url: current_artist.images[0].url
        });
        var spotifyApi = new SpotifyWebApi();
        spotifyApi.setAccessToken(access_token);
        spotifyApi.getArtistAlbums(current_artist.id, {album_type: 'album', limit: 10, market: 'BR'}, (err, data) => {
        if(err){
            console.log(err);
            // window.location.replace(api_url);
        }
        console.log(access_token);
        console.log("Data: ", data);
        console.log("State current artist: ", this.state.current_artist);
        this.setState({
            albums: data.items,
            selected_album_id: data.items[0].id
        });
    });
}

在ArtistsSearchList组件文件中，我有：我将再次传递作为组件ArtistsSearchListItem的方法的道具

 <ArtistsSearchListItem
                key={artist.id}
                current_artist={artist}
                onArtistSelect={this.props.onArtistSelect}
                artist_image_url={artist.images[0].url} />

在ArtistsSearchListItem文件中，我将通过所有这些方式调用作为道具传递的方法：

const ArtistSearchListItem = (props) => {
    const artist_name = props.current_artist.name;
    const artist_image_url = props.artist_image_url;
    return(
        <li onClick={() => props.onArtistSelect(props.current_artist)} className="artist-search-list-item">
            <h3>{artist_name}</h3>
            <img alt="Foto do artista" className="img-responsive img-thumbnail" src={artist_image_url}/>
        </li>
    );
}

我的回购： https://github.com/igorPhelype/Spotigorfy

webapp工作： https://igorphelype.github.io/Spotigorfy/

如何直接调用道具？

1 个答案: