javascript - 减少函数 React 中的重复状态

Question

我有以下代码：

function Home() {
  const [view_points, setViewPoints] = React.useState(true);
  const [view_races, setViewRaces] = React.useState(true);
  const [view_wpm, setViewWPM] = React.useState(true);

  function handleViewPoints(e) {
    setViewPoints(e.target.checked);
  }
  function handleViewWPM(e) {
    setViewWPM(e.target.checked);
  }
  function handleViewRaces(e) {
    setViewRaces(e.target.checked);
  }

  <Step4
    viewraces={handleViewRaces}
    viewwpm={handleViewWPM}
    viewpoints={handleViewPoints}
  />

  <Step5
    viewpoints={view_points}
    viewraces={view_races}
    viewwpm={view_wpm}
  />

它们被用作：

<Checkbox onChange={props.viewpoints}>Points</Checkbox>
<Checkbox onChange={props.viewraces}>Races</Checkbox>
<Checkbox onChange={props.viewwpm}>WPM</Checkbox>             

这是很多重复。

有没有推荐的方法来减少重复代码而不转换到基于类的组件？

提前致谢。

标签： javascriptreactjs

Answer 1

使用状态作为对象而不是布尔值。所以单一状态就足够了

CodeSandbox 演示

const [state,setState] = useState({
   view_points:true,
   view_races:true,
   view_wpm:true
})