它如何自动将状态对象表示为 React js 中的参数？

Question

class App extends React.Component{
    constructor(){
       super();
       this.state={
           count: 0
       }; 
       this.handleClick = this.handleClick.bind(this);
    }
    
    handleClick(){
        this.setState((e)=>{
            return ({count: e.count + 1})
        })
        
    }
    
    render(){
        return(
            <div>
                <h2>{this.state.count}</h2>
                <button onClick={this.handleClick}>Click Me</button>
            </div>
        )
    }
}

这是一个简单的 React Class 组件。我的问题是在 handleClick() 函数中，我使用了 setState() 方法。我将箭头函数传递给 setState() 函数。在那个箭头函数中，我选择 e 作为参数。我还看到 e 代表这个 class 的 state object。但是我没有传递那个状态对象。但自动 e 表示我的 State 对象。但是我没有在任何地方将状态对象作为参数传递。它是怎么发生的？那背后是什么？

谁能解释一下？我是 React 的初学者。

谢谢大家

Answer 1

作为 React 初学者，我会花更多时间学习 React Hooks，这是一种不同于使用类的工作方式。 React Hooks 有很多好处，这就是 React 从这里开始发展的方式。在这一点上，React Class 组件仍然有效，但是它们是较旧的做事方式并且使用得越来越少。

这是使用 React Hooks 做同样事情的新方法：

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Answer 2

你是对的，你没有将状态传递给 setState，但是你传递给 setState 的是一个函数，它会响应调用并传递先前的状态，这就是为什么 e 持有一个之前状态的对象。

为什么你认为在下面的例子中 e 会是 5

function passFive(funArg) { return funArg(5) }

passFive((e) => console.log(e))

它如何自动将状态对象表示为 React js 中的参数？

How it automatically represent state object as parameter in React js?

parameters

setstate

reactjs