在React Typescript中映射数据库时，如何只改变一个按钮的状态而不影响其他按钮？

Question

我创建了启用/禁用按钮，根据布尔值更改颜色。所有默认按钮都会变成“禁用”按钮，单击时，所有按钮都会变成“启用”按钮。我该如何解决这个问题。

function createData(
    id: number,
    name: string,
    enableStatus: boolean,
  ) {
    return { id, name, owner, category, join, status, enableStatus };
  }

const rows = [
    createData(1, 'quiz1', true),
    createData(2, 'quiz2', false),
    createData(3, 'quiz3', true),
    createData(4, 'quiz4', false),
    createData(5, 'quiz5', true),
  ];
const [status, setStatus] = useState(false)
function Surveys() {const handleButton = () => {
    setStatus(status => !status)
}
    return (
    {rows.map((row) => (
      <Button  variant="contained" color={status? 
               'warning': 'error'} onClick={updateAbsent} size="small">
               {status? "Enabled": 'Disabled'}
      </Button>
    )
)
}

Answer 1

您的所有按钮都共享一个

useState

，因此当您更改它时，它会影响所有按钮。

因此，让该状态存储所有按钮的状态。您可以使用这样的对象类型来做到这一点：

{ [id: number]: boolean | undefined }

此类型是可以索引

number

的对象，并且每个属性要么缺失 (

undefined

) 要么设置为

boolean

值。

这使您可以通过每行的特定

status

来存储该行的

id

。

现在用它作为你的状态：

const [status, setStatus] = useState<{ [id: number]: boolean | undefined }>({})

现在要处理点击，创建一个接受要切换的 id 的函数，然后在状态中切换该 id。

  const handleButton = (id: number) => {
    setStatus((status) => ({
      ...status,
      [id]: !status[id]
    }))
  }

然后在每一行的

onClick

中，只需传入该行的

id

：

  return rows.map((row) => (
    <Button
      variant="contained"
      color={status[row.id] ? 'warning' : 'error'} // check row.id status here
      onClick={() => handleButton(row.id)} // pass row.id here
      size="small"
    >
      {status ? 'Enabled' : 'Disabled'}
    </Button>
  ))

现在，当他们单击按钮时，将设置新状态，其中仅切换所单击的行的 ID。

要检查状态，您只需检查

status[row.id]

。

参见 Typescript Playground