4-8节的addToCart函数里面setState里为什么要传函数，而不直接更改state的值呢

Question

4-8节的addToCart函数里面setState的参数为什么要传函数，而不直接更改state的值呢？分别如以下图一图二

Answer 1

阿莱克斯刘 2021-09-29 07:38:48

hello同学，截图中的setState定义在代码第13行（红箭头标注），其实是我们自己定义的setState，它可不是react类组件的内建方法“this.setState()”。这俩只是名字一样而已，完全是两码事。

在截图中，我们也能看到setState的类型，它就是一个接受value返回void的方法。

所以，如果我们去掉函数参数，代码就会报错，因为他的参数类型出错了：

请注意，Robert函数组件中的setState与类组件this.setState是不一样的东西，所以在这里的用法是有区别的。

谢谢你的提问，不知道我讲清楚了没有？如果还不明白，请继续提问

• 沉淀____ #1

  我看到它的函数签名是 (value: React.SetStateAction<AppStateValue>) => void 了，不过我这里也是和楼主一样，传递对象进去却没有报错，而且功能正常运行。。。

• yossarian42 #2

  const Robot: React.FC<RobotProps> = ({ id, name, email }) => {
    const appState = useContext(appContext);
    const appSetState = useContext(appSetStateContext);
  
    const addToCart = () => {
      if (appSetState) {
        appSetState({
          ...appState,
          shoppingCart: {
            items: [...appState.shoppingCart.items, { id, name }],
          },
        });
      }
    };
  
  通过context hook获取的setState就是和state绑定的吧，直接传新state的值进去，运行也没有问题