如何根据 props 在 React 中设置初始 useState 值

Question

我目前将我的 active 状态设置为 0:

const [active, setActive] = useState(0);

但我想知道如果我的组件属性之一：isFilterMode 为真，我如何将初始值设置为 null？所以初始状态是基于道具的“动态”？

Answer 1

像下面这样尝试

const [active, setActive] = useState(props.isFilterMode ? null : 0);

或者

使用回调函数(lazy initialisation)

const [active, setActive] = useState(() => props.isFilterMode ? null : 0);

Answer 2

const Component = ({ isFilterMode }) => {
  const [active, setActive] = useState(() => isFilterMode ? null : 0);
  ...
}

Answer 3

您可以使用 return 值定义一个表达式作为 useState 的参数。使用像 props.isFilterMode ? null : 0 这样的三元运算符，如果 props.isFilterMode 的值评估为真，则您将 return null 否则为 0。所以在 useState 你会：

  const [active, setActive] = useState(props.isFilterMode ? null : 0);

就像 Amila 在另一个答案中建议的那样，您可以使用回调作为 useState 的参数以及任何被评估和 return 从该回调中编辑的内容将是您使用箭头函数的初始状态，您可以执行类似的操作:

 const [active, setActive] = useState(() => props.isFilterMode ? null : 0);

或更明确但代码更长：

  const [active, setActive] = useState(() => { if(props.isFilterMode){ return null;} else { return 0;} } );

如何根据 props 在 React 中设置初始 useState 值

How to set initial useState value in React based on props

javascript

reactjs

use-state