React.js useState 和函数组件上的 Array.push 方法

Question

我想用useState钩子改变状态的值，但我以前从未useState在功能组件中使用钩子，我得到了一个非常奇怪的错误。即使我将所有变量定义为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>
        )
      }
    <>
  )
}

这是我得到的奇怪错误：

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>
        )
      }
    <>
  )
}

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>
        )
      }
    <>
  )
}