javascript - React.js useState 与功能组件上的 Array.push 方法

Question

我想用 useState 钩子(Hook)改变状态值，但我以前从未在功能组件中使用过 useState 钩子(Hook)，我得到了一个非常奇怪的错误。即使我将所有变量定义为 string[]，它也会尝试将整个数组定义为 number。

import * as React from 'react'
import { NextPage } from 'next'

const IndexPage: NextPage = () => {
  const [countries, setCountries] = React.useState<string[]>([])

  return (
    <>
      {
        ["Dallas", "Oregon", "New York", "California"].map((x: string) =>
          <button onClick={() => setCountries(countries.push(x))}>
            <span>{x}</span>                  ^^^^^^^^^^^^^^^^^
          </button>
        )
      }
    <>
  )
}

这是我得到的奇怪错误:

(method) Array<string>.push(...items: string[]): number
"Argument of type 'number' is not assignable to parameter of type 'SetStateAction<string[]>'.ts(2345)"

Answer 1

Array.push 返回一个数字，因此您必须将代码更改为此

import * as React from 'react'
import { NextPage } from 'next'

const IndexPage: NextPage = () => {
  const [countries, setCountries] = React.useState<string[]>([])

  return (
    <>
      {
        ["Dallas", "Oregon", "New York", "California"].map((x: string) =>
          <button onClick={() => {
          // either this
          setCountries(countries.concat(x))
          // or
          setCountries([...countries, x]
          }>
            <span>{x}</span>                  
          </button>
        )
      }
    <>
  )
}