Question

我有点不确定如何更改此代码以在功能组件中使用。我已经编辑了我所有的其他 setStates，但是这个有两个状态更新，然后是一个回调函数，所以我不知道如何处理这种情况。有什么想法吗？

const handleSortAlpha = () => {
  setState({
    sortalphaStatus: sortalphaStatus === 'A-Z' ? 'Z-A' : 'A-Z',
    sorttypeStatus: 'alpha',
  },
  () => {
    inputToOutput();
  });
};

Answer 1

const [alphaStatus,setalphaStatus] = useState()
const [type,settypeStatus] = useState()

和函数：

changeStates = () => {
  const value = 'A-Z' ? 'Z-A' : 'A-Z'
  setalphaStatus(value);
  settypeStatus(alpha);
  inputToOutput();
}

Answer 2

因此，类 this.setState 和使用从 useState 返回的第二个参数更新状态的功能组件之间的主要区别在于它不会合并状态而是替换它。因此，如果您在一个组件中有很多 props，请确保为每个 props 声明一个 state，而不是将它们分组到一个 useState 中 - 这会让您更容易管理。

然而，与类中的 this.setState 不同，更新状态变量总是替换它而不是合并它。 参考：https://reactjs.org/docs/hooks-state.html

至于触发回调函数，请使用 useEffect 钩子，当它的依赖项更改时会触发该钩子 - 在下面提供的示例中，一旦（sortalphaStatus 或 sorttypeStatus）更改，将触发 inputToOutput 函数。您尝试这样做的方式将不起作用，因为 useState 第二个参数不接受回调 https://reactjs.org/docs/hooks-reference.html（搜索 setState(newState);）。

例如

[num, setNum] = useState();

setNum 函数只接受一个新值 setNum(5)，不考虑其他参数。

setNum(5, () => console.log('potato'));

potato 永远不会登录到控制台。

import React, { useState, useEffect } from 'react';

const inputToOutput = () => null;

export const TestComponent = () => {
  const [sortalphaStatus, setSortalphaStatus] = useState('A-Z');
  const [sorttypeStatus, setSorttypeStatus] = useState('alpha');
  
  const handleSortAlpha = () => {
    setSortalphaStatus(sortalphaStatus === 'A-Z' ? 'Z-A' : 'A-Z');
    setSorttypeStatus('alpha')
  };

  useEffect(() => {
    inputToOutput()
  }, [sortalphaStatus, sorttypeStatus])

  return <div onClick={handleSortAlpha}>test</div>
};`

使用功能组件的回调重构 setState

2 个答案: