如何根據 props 在 React 中設置初始 useState 值

Question

我目前將我的active state 設置為 0：

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

但我想知道如果我的組件道具之一： isFilterMode為真，如何將初始值設置為null ？ 那么最初的 state 是基於道具的“動態”嗎？

Answer 1

像這樣試試

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

或使用回調 function （ lazy initialization ）

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

Answer 2

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

Answer 3

您可以定義一個帶有返回值的表達式作為 useState 的參數。 使用像props.isFilterMode? null: 0 props.isFilterMode? null: 0如果props.isFilterMode的值為 true，則返回null ，否則返回 0。 因此，在useState中，您將擁有：

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