React setState +“prevState”从何而来？

IT技术 javascript reactjs
2021-05-04 11:35:01

我刚开始学习 React 和 JavaScript。
在学习本教程时，我看到了一个组件的示例代码，它创建了一个切换按钮。
这是代码的一部分：

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({    // prevState?
            isToggleOn: !prevState.isToggleOn
        }));
    }

在这里困扰我的两件事：

  1. 该从何prevState说法从何而来？在调用它之前
    我没有看到任何类似的东西var prevState = this.state;，但它仍然有效。
  2. 箭头函数的语法：为什么箭头后面的括号？
    为什么通常的arg => { statement; }语法在这里不起作用？

抱歉新手问题...

2个回答

  1. prevState由React和 提供props，两者都是可选的。

    • 2019 年 4 月 13 日更新：React 通过将 setState 函数文档重命名prevState为updater. 回调函数仍然需要两个参数；的state和props在时间正被施加的变化。

  2. 括号允许多行，如果您不使用括号，您将被迫使用return. 您可以使用单行，但不需要花括号。

    • 更新：我忘了提及需要括号的特定情况。如果您要返回一个没有return语句的对象，则必须将其括在括号中。谢谢@joedotnot 抓住了这一点。所以() => {foo: true}会抛出错误，因为它看起来像一个函数并且foo: true是一个无效的行。要解决这个问题，它必须看起来像() => ({ foo: true })

我用这个。（例子）

const [modal, setModal] = useState(false);
const [dataAction, setDataAction] = useState({name: '', description: ''});

const _handleChangeName = (data) => {
    if(data.name)
        setDataAction( prevState  => ({ ...prevState,   name : data.name }));
    if(data.description)
        setDataAction( prevState  => ({ ...prevState,   description : data.description }));
  };
其它你可能感兴趣的问题
上一篇哪些常见的 3D 打印材料/方法可以适当地复制（耐用性）这种注塑成型的聚丙烯产品？ 下一篇react this.props 未定义