如何从错误边界恢复中重置 React 状态？

Question

我的应用程序有一个用户输入查询以向 Pokemon API 发出请求并呈现响应数据。

如果用户输入数据库中不存在的查询，它将触发错误边界和Try Again 按钮，通过重置查询状态从错误中恢复并让用户重新提交不同的查询。这是预期的行为。

但是，在我当前的设置下，当用户的查询没有任何匹配项时，控制台将显示GET https://pokeapi.co/api/v2/pokemon/foo 404 和Uncaught (in promise) Error: Request failed with status code 404。但是，用户没有看到此错误。没有什么可以告诉用户他们的查询没有任何匹配项。我的目标是获得更明确的用户体验，告诉用户他们提交的请求没有任何匹配项，然后单击 Try Again 按钮重置输入并提交新查询。我相信，这就是错误边界应该做的。

我正在使用以下库：React Query, React Hook Form, React Error Boundary。有人建议我使用 React Query 的 onError 回调来记录错误并设置属性 useErrorBoundary: true。还是没有运气。

这是一个演示预期行为的工作示例。 https://epic-react-exercises.vercel.app/react/hooks/3

这是我的尝试。请让我知道如何解决这个问题。 https://codesandbox.io/s/pokedex-5j1jf

const ErrorFallback = ({ error, resetErrorBoundary }) => {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
      <p>This error was caught by the error boundary!</p>
    </div>
  );
};

const searchSchema = yup.object().shape({
  pokemonName: yup.string().required()
});

const App = () => {
  const [query, setQuery] = useState("");
  const [pokemonCharacter, setPokemonCharacter] = useState({});
  const { register, handleSubmit, watch, errors } = useForm({
    resolver: yupResolver(searchSchema)
  });

  const handlePokemonFetch = () => {
    return axios(`https://pokeapi.co/api/v2/pokemon/${query}`).then((res) => {
      setPokemonCharacter(res.data);
    });
  };

  const { loading, error } = useQuery("pokemon", handlePokemonFetch, {
    refetchOnWindowFocus: false,
    enabled: false,
    useErrorBoundary: true,
    onError: (error) => console.log(error)
  });

  console.log(watch(pokemonCharacter));

  return (
    <div>
      <div>
                <form onSubmit={handleSubmit(handlePokemonFetch)}>
                    <label htmlFor="Pokemon">Pokémon Character</label>
                    <input
                        type="text"
                        name="pokemonName"
                        ref={register}
                        onChange={(event) => setQuery(event.target.value)}
                    />
                    {errors.pokemonName && <span>This field is required</span>}
                    {error && <p>Error occurred: {error.message}</p>}
                    <button type="submit">Search Pokémon</button>
                </form>
      </div>
            <ErrorBoundary
        FallbackComponent={ErrorFallback}
        onReset={() => {
          setQuery("");
        }}
        resetKeys={[query]}
      >
        <div>
          {loading && <p>Loading...</p>}
          <PokemonInfo pokemonCharacter={pokemonCharacter} />
        </div>
      </ErrorBoundary>
            <ReactQueryDevtools initialIsOpen={true} />
    </div>
  );
};

Answer 1

我认为问题出在您使用错误边界的方式上。

如果我们查看 react-error-boundary 的文档，我们会看到以下内容：

最简单的使用方法是将它包裹在任何可能引发错误的组件周围。这也将处理该组件及其后代抛出的错误。

在您的示例中，引发错误的组件是呈现ErrorBoundary 的组件。但为了使其正常工作，引发错误的组件应该是 ErrorBoundary 的子组件。

我创建了一个稍微不同的沙箱来说明这一点。 https://codesandbox.io/s/jovial-poincare-06e6v