如何像这样使用 useState？这是什么意思？答案

【问题标题】：how to use useState like this? what does it mean?如何像这样使用 useState？这是什么意思？
【发布时间】：2022-11-14 15:13:45
【问题描述】：

谁能解释一下const rerender = React.useState(0)[1]这是什么？

import React from 'react'
import axios from 'axios'
import {
  useQuery,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"

const getCharacters = async () => {
  await new Promise((r) => setTimeout(r, 500))
  const { data } = await axios.get('https://rickandmortyapi.com/api/character/')
  return data
}

const getCharacter = async (selectedChar) => {
  await new Promise((r) => setTimeout(r, 500))
  const { data } = await axios.get(
    `https://rickandmortyapi.com/api/character/${selectedChar}`,
  )
  return data
}

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

function Example() {
  const queryClient = useQueryClient()
  **const rerender = React.useState(0)[1]**
  const [selectedChar, setSelectedChar] = React.useState(1)

  const charactersQuery = useQuery(['characters'], getCharacters)

  const characterQuery = useQuery(['character', selectedChar], () =>
    getCharacter(selectedChar),
  )

  return (
    <div className="App">
      <p>
        Hovering over a character will prefetch it, and when it's been
        prefetched it will turn <strong>bold</strong>. Clicking on a prefetched
        character will show their stats below immediately.
      </p>
      <h2>Characters</h2>
      {charactersQuery.isLoading ? (
        'Loading...'
      ) : (
        <>
          <ul>
            {charactersQuery.data?.results.map((char) => (
              <li
                key={char.id}
                onClick={() => {
                  setSelectedChar(char.id)
                }}
                onMouseEnter={async () => {
                  await queryClient.prefetchQuery(
                    ['character', char.id],
                    () => getCharacter(char.id),
                    {
                      staleTime: 10 * 1000, // only prefetch if older than 10 seconds
                    },
                  )

                  setTimeout(() => {
                    **rerender({})**
                  }, 1)
                }}
              >
                <div
                  style={
                    queryClient.getQueryData(['character', char.id])
                      ? {
                          fontWeight: 'bold',
                        }
                      : {}
                  }
                >
                  {char.id} - {char.name}
                </div>
              </li>
            ))}
          </ul>

          <h3>Selected Character</h3>
          {characterQuery.isLoading ? (
            'Loading...'
          ) : (
            <>
              <pre>{JSON.stringify(characterQuery.data, null, 2)}</pre>
            </>
          )}
          <ReactQueryDevtools initialIsOpen />
        </>
      )}
    </div>
  )
}

我想知道这是什么意思，我无法理解这种 useState 语法，我从未见过这种语法。任何人都可以分享一下吗？

【问题讨论】：

看起来它正在访问返回的数组的第一个元素，而无法访问 setter，

标签： reactjs react-hooks prefetch rerender

【解决方案1】：

useState 有两部分值和一个更新值的函数。

看看下面的 sn-p，它解释了 useState 挂钩如何正常分配值。

  var fruitStateVariable = useState('banana'); // Returns a pair
  var fruit = fruitStateVariable[0]; // The value of the state
  var setFruit = fruitStateVariable[1]; // A asynchronous function to update the state.

通过访问索引为 1 的项目，您正在分配 rerender 一个函数来更新状态。

至于代码为什么这样做，似乎作者试图绕过useState 是asynchronous to update。这不是一个好的模式，应该避免！.正如您所说的那样，您之前没有见过这种语法，因为它不是触发函数重新呈现的合适方式。

React Docs 推荐这种方式，如果你真的需要强制重新触发：

  const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

  function handleClick() {
    forceUpdate();
  }

但是此资源的关键行是尽可能避免这种模式。

【讨论】：