javascript - 如何直接调用 Prop ？

Question

我正在尝试直接调用 props 函数 this.props.setAuth(); ，但它似乎不起作用:/

TypeError: Cannot read property 'props' of undefined

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

我想在没有任何事件处理程序的情况下更改父状态，例如 onClick={this.props.setAuth}。我想在异步函数中执行此操作，是的。

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

编辑:额外代码:

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组件，这是我要调用props函数的部分代码

 onSignIn(googleUser) {

(无用代码)- onSignIn 在 App 组件内

        axios.post('http://localhost:3000/auth', {
         userId: id,
         name: name,
         email: email
        })
        .then(function (response) {
        this.props.setAuth();

        })
        .catch(function (error) {
          console.log(error);
        });


         }.bind(this));

Answer 1

举个例子:

我的索引文件有这个组件和这个功能:该组件将接收一个回调函数作为 props。

<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 组件文件中我有这个:我将再次作为 Prop 传递组件 ArtistsSearchListItem 的方法

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

在 ArtistsSearchListItem 文件中，我将最终通过这种方式调用作为 props 传递的方法:

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

网络应用工作: https://igorphelype.github.io/Spotigorfy/