如何让useRef钩子在这段代码中工作？

Question

我有一个关于啤酒愿望清单的项目，我在其中使用了 React。问题是我收到这个错误

TS2786: 'EditBeerPage' cannot be used as a JSX component.
  Its return type 'Element | undefined' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.
    32 |                     <Route path='/' element={<DisplayBeersPage />} />
    33 |                     <Route path='/addBeer' element={<AddbeerPage />} />
  > 34 |                     <Route path='/editBeer' element={<EditBeerPage />} />
       |                                                       ^^^^^^^^^^^^
    35 |                 </Routes>
    36 |             </BrowserRouter>
    37 |         </BeersContextProvider>

我不知道如何解决这个问题。如果需要，我可以提供有关我的代码的更多详细信息。

import { BeersContext } from '../../contexts/BeersContext';
import { BeerForm } from '../../features/CRUD operations/Beer form/BeerForm';
import { Layout } from '../../shared/components/layout/layout';
import { Button } from '../../shared/components/button/button';
import { Beer } from '../../models/Beer';
import React from 'react';
import { useContext, useRef } from 'react';
import { useNavigate, useParams } from 'react-router-dom';

function handleOnClick(
    idInput: React.RefObject<HTMLInputElement>,
    nameInput: React.RefObject<HTMLInputElement>,
    manufacturerInput: React.RefObject<HTMLInputElement>,
    typeInput: React.RefObject<HTMLInputElement>,
    urlInput: React.RefObject<HTMLInputElement>,
) {
    if (!idInput.current || !nameInput.current || !manufacturerInput.current || !typeInput.current || !urlInput.current)
        throw new Error('Inputs references are null');

    if (!idInput.current.value || !nameInput.current.value || !manufacturerInput.current.value || !typeInput.current.value || !urlInput.current.value)
        throw new Error('You must provide values for each field!');

    const beerId: number = parseInt(idInput.current.value),
        beerName: string = nameInput.current.value,
        beerManufacturer: string = manufacturerInput.current.value,
        beerType: string = typeInput.current.value,
        beerUrl: string = urlInput.current.value;

    return new Beer(beerId, beerName, beerManufacturer, beerType, beerUrl);
}

export function EditBeerPage() {
    document.title = 'Edit Beer';

    const idInput = useRef<HTMLInputElement>(null);
    const nameInput = useRef<HTMLInputElement>(null);
    const manufacturerInput = useRef<HTMLInputElement>(null);
    const typeInput = useRef<HTMLInputElement>(null);
    const urlInput = useRef<HTMLInputElement>(null);

    const navigate = useNavigate();
    const beersContext = useContext(BeersContext)!;

    const { beerId } = useParams();
    if (!beerId) {
        navigate('/');
        return;
    }

    const givenBeer = beersContext.beers.find((beer: Beer) => beer.getID() === parseInt(beerId));
    console.log('Given Beer:', givenBeer); // Log the value of givenBeer
    const handleOnClickWrapper = () => {
        try {
            const newBeer = handleOnClick(idInput, nameInput, manufacturerInput, typeInput, urlInput);
            beersContext.removeBeer(newBeer.getID());
            beersContext.addBeer(newBeer);

            navigate('/');
        } catch (error) {
            alert(error);
        }
    };

    return (
        <Layout>
            <div className='main-page-container'>
                <BeerForm
                    idInput={idInput}
                    nameInput={nameInput}
                    manufacturerInput={manufacturerInput}
                    typeInput={typeInput}
                    urlInput={urlInput}
                    givenBeer={givenBeer}
                />

                <Button type='submit' buttonMessage='Edit Beer' onClick={handleOnClickWrapper} />
            </div>
        </Layout>
    );
}

这就是 EditBeerPage 部分的代码。

使用 npm create-react-app lab1 --template typescript 正确创建项目。我使用 Visual Studio Code。

尝试编辑 EditBeerPage 部分代码和其他内容，从 undefined 更改为 null 等，但没有任何效果。我安装了最新版本的react-router和react-dom。 ChatGPT 确认 EditBeerPage 返回有效的 JSX 组件

Answer 1

问题就在这里：

    if (!beerId) {
        navigate('/');
        return;
    }

如果您返回

undefined

，TypeScript 会认为这是一种可能性，并在运行代码之前告诉您。

尝试更改为：

    if (!beerId) {
        navigate('/');
        return null;
    }