React Hook 遇到的问题集锦

part1：

需求：

• 发异步请求修改界面信息
• 请求结束后重新渲染界面

问题：

• 当你手速够快，或者请求返回速度够慢的时候，a 行先渲染，再渲染b 行的时候，a 行的结果会变回未修改时的结果

过程：

• 查看原先的代码

• import React, { useState } from 'react';
  
  function Bulbs() {
    const [on, setOn] = useState(false);
  
    const switch = () => {
      console.info("switch");
      setTimeout(setOn(!on), 1000);
    }
  
    return (
      <>
        <div className={on ? 'on' : 'off'}>
          延时修改开关状态
        </div>
        <button onClick={switch}>开/关</button>
      </>
    );
  }

•  双击按钮，会发现并不会把开关关闭掉
• log 日志正常
• 查看对应的文档
• https://zh-hans.reactjs.org/docs/hooks-reference.html#functional-updates
• 需要改用函数式修改

• import React, { useState } from 'react';
  
  function Bulbs() {
    const [on, setOn] = useState(false);
  
    const switch = () => {
      console.info("switch");
      setTimeout(setOn(on => !on), 1000);
    }
  
    return (
      <>
        <div className={on ? 'on' : 'off'}>
          延时修改开关状态
        </div>
        <button onClick={switch}>开/关</button>
      </>
    );
  }