Question

目前，我有一个小问题，当从一个子组件使用回调函数时，一切都很好，另一方面，它不起作用。

以下是代码：

App.js

export default class App extends Component {
  constructor(props) {
    super(props);
    this.loggedInCallback = this.loggedInCallback.bind(this);
    this.renderApplicationContent = this.renderApplicationContent.bind(this);
    this.state = {
      loggedIn: false,
      user: null
    }
  }

  loggedInCallback = (status, user = null) => {
    this.setState({
      loggedIn: status,
      user: user
    })
  }

  renderApplicationContent = () => {
    if (this.state.loggedIn === false) {
      return <LoginForm updateLoginStatus={this.loggedInCallback} />
    } else {
      return <UserData updateLoginStatus-={this.loggedInCallback} user={this.state.user} />;
    }
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="Impact logo" />
          <h1 className="App-title">Welcome to Impact</h1>
        </header>

        <div className="App-content">
          {this.renderApplicationContent()}
        </div>
      </div>
    );
  }
}

UserData.js

这是我收到此错误的地方：https://screenshot.click/03-31-21ut0-rxzrk.jpg

import React, { Component } from 'react';
import './UserData.css';

export default class UserData extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.updateLoginStatus(false)}>
          Logout
        </button>
        <div>
          ID: {this.props.user}
        </div>
      </div>
    )
  }
}

我不是100％确定导致此错误的原因。我认为这是一个绑定错误，也许它仍然是，但我似乎无法弄清楚缺少绑定导致问题的位置。在LoginForm组件上使用相同的东西时，我没有遇到任何错误，并且几乎完全相同。

Answer 1

您的代码中存在两个问题

首先：一个拼写错误updateLoginStatus-={this.loggedInCallback}，而不是使用-=赋值运算符。将其更正为updateLoginStatus={this.loggedInCallback}

第二：从孩子调用一个函数

<button onClick={this.props.updateLoginStatus(false)}>

应该是

<button onClick={() =>this.props.updateLoginStatus(false)}>

因为，当你编写onClick={this.props.updateLoginStatus(false)}时，每当组件渲染onClick处理程序将被评估时，将调用父项中的setState，这反过来将导致无限循环。您需要为function事件处理程序

分配onClick

Answer 2

return <UserData updateLoginStatus-={this.loggedInCallback} user={this.state.user} />;
                                  ^ remove this dash

同样在

<button onClick={this.props.updateLoginStatus(false)}>

你可能希望传递一个运行updateLoginStatus的函数，而不是在渲染时运行它，所以传入一个箭头函数：

<button onClick={() => this.props.updateLoginStatus(false)}>

Answer 3

您的代码输入错误：

return <UserData updateLoginStatus-={this.loggedInCallback} user={this.state.user} />;

删除 - 符号，使其成为：

return <UserData updateLoginStatus={this.loggedInCallback} user={this.state.user} />;

当孩子调用父

3 个答案: