尝试更改状态时发生未知错误

Question

我目前正在学习 react，当我尝试创建一个函数来更改类组件的状态并呈现值时收到一个未知错误。按钮不显示状态值，函数给出未知错误。我该如何解决？

class App extends React.Component {
    constructor(){
        super()
        this.state={
            loggedIn:true
        }
    }
    render(){
      const Log = () =>{
            this.setState({loggedIn:!loggedIn})
            }
    return (
        <div>
<button onClick={Log}>{this.state.loggedIn}</button>
        </div>
    )
    }
}

export default App

Answer 1

我认为尝试将 loggedIn 更改为 this.state.loggedIn 可能会有所帮助

const Log = () => {
    this.setState({ loggedIn: !this.state.loggedIn })
}

Answer 2

在 render() 中使用 setState() 是一种不当行为。

<块引用>

在此处调用 setState() 会使您的组件产生无限循环。 render() 函数应该是纯函数，这意味着它不修改组件状态，每次调用都返回相同的结果，并且不直接与浏览器交互。在这种情况下，请避免在此处使用 setState()。

https://blog.logrocket.com/an-imperative-guide-to-setstate-in-react-b837ceaf8304/

import { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      loggedIn: true
    };
    this.Log = this.Log.bind(this);
  }

  Log = () => {
    this.setState({ loggedIn: !this.state.loggedIn });
  };

  render() {
    return (
      <div>
        <button onClick={this.Log}>{`${this.state.loggedIn}`}</button>
      </div>
    );
  }
}

export default App;

您可以使用上面提到的 ES6 模板文字来记录按钮中的状态。

https://codesandbox.io/s/setstate-in-render-68189771-4tzec?file=/src/App.js

如果您需要进一步的支持，请告诉我。