Question

我刚开始学习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
        }));
    }

在这里困扰我的两件事：

prevState论证来自哪里？
在调用之前我没有看到var prevState = this.state;之类的东西，但仍然有效。
箭头功能的语法：为什么箭头后的括号？
为什么通常的arg => { statement; }语法不能在这里工作？

抱歉新手问题......

Answer 1

prevState由React和props提供，两者都是可选的。
- 更新04/13/19 ：React通过将prevState重命名为updater来更改了setState函数文档。回调函数仍然有两个参数;在应用更改时state和props。
括号允许多行，如果您没有使用括号，则必须使用return。你可以使用一行，但不需要大括号。
- 更新：我忘了提到需要括号的特定情况。如果您在没有return语句的情况下返回对象，则必须将其包含在括号中。谢谢@joedotnot抓住这个。所以() => {foo: true}会抛出一个错误，因为它看起来像一个函数而foo: true是一个无效的行。要解决此问题，必须看起来像() => ({ foo: true })

Answer 2

我用这个。（示例）

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 }));
  };

React setState +＆＃39; prevState＆＃39;来自？

2 个答案: