反应列表子复选框在父状态更改时延迟

Question

很确定我在这里遗漏了一些明显的东西！

我有一个列表组件呈现一系列卡片。每张卡片都有一个复选框，以便用户可以选择多个项目，然后对所有项目执行操作。我将项目列表存储在父组件中，但这会导致复选框的视觉更改延迟。

家长：

const Results = ({results}) => {
  const [selected, setSelected] = React.useState([])
  return (
    <div>
      <h2>Results</h2>
      {results.map((result) => (
        <Card
          key={result.id}
          selected={selected.includes(result.id)}
          onChange={() => {
            if (selected.includes(result.id) {
              setSelected(selected.filter((id) => id !== result.id))
            } else {
              setSelected([...selected, result.id])
            }
          }
        />
      )}
    </div>
  )
}

孩子：

const Card = ({selected, onChange}) => (
  <div>
    <input
      type="checkbox"
      selected={selected}
      onChange={onChange}
    />
  </div>
)

这是因为每次复选框更改时，都会导致父级重新渲染自己并且它是子级？我可以看到父母状态中列表的实际更新发生得很快，但是复选框的视觉变化随后被延迟。确保复选框在单击时响应更改以及更新父项中选中项目列表的最佳方法是什么？

编辑

我也试过useEffect...

家长：

const Results = ({results}) => {
  const [selected, setSelected] = React.useState([])
  return (
    <div>
      <h2>Results</h2>
      {results.map((result) => (
        <Card
          key={result.id}
          onChange={() => {
            if (selected.includes(result.id) {
              setSelected(selected.filter((id) => id !== result.id))
            } else {
              setSelected([...selected, result.id])
            }
          }
        />
      )}
    </div>
  )
}

孩子：

const Card = ({onChange}) => {
  const [selected, setSelected] = React.useState(false)

  React.useEffect(() => {
    onChange(fault.faultUuid)
  }, [selected])

  return (
    <div>
      <input
        type="checkbox"
        selected={selected}
        onChange={() => setSelected(!selected)}
      />
    </div>
  )
}

解决方案

我找到了，每次选中/取消选中任何复选框时，列表中的每个组件都会发出 GraphQL 请求。

Answer 1

您应该能够通过在您的 Card 组件上使用 memoization 来解决这个问题。

像这样：

import React, { memo } from 'react'

const Card = memo(({selected, onChange}) => (
  <div>
    <input
      type="checkbox"
      selected={selected}
      onChange={onChange}
    />
  </div>
))

这意味着您的 Card 组件只会在其 props 更改时重新渲染。