React 正确渲染元素

Question

我有一个小问题，我尝试使用 React 构建一个语言学习网站，

这是我的初始主页，当我尝试搜索一个词但该词在数据库中不存在时，我的网站应该说“我们在数据库中找不到该词”，但是该消息它是在我幻灯片的顶部生成的..就像

我真的不知道我能做什么..

我的主页代码：

import React from 'react';
import Carousel from 'react-bootstrap/Carousel';
import pozika from '../images/telescop.png';
import '../../src/Ceseseu.css';
import pozika2 from '../images/door.png';
import pozika3 from '../images/threeword.png';
import pozaAbout from '../images/learnkorean.jpg';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import NavbarFunction from '../pages/NavBarAndSearchSentence';
import { faCheckSquare } from '@fortawesome/free-solid-svg-icons';



function HomePageSlideShow() {
    return (
       <>
         <div className='test '>
            <Carousel>
                {/* <div className='letsDoIt'> */}
                <Carousel.Item interval={1000}>
                    <img
                        className='d-block w-100'
                        width={900}
                        height={500}
                        src={pozika}
                        alt='First slide'
                    />
                    <Carousel.Caption>
                        <h3></h3>
                        <p></p>
                    </Carousel.Caption>
                </Carousel.Item>
                {/* </div> */}
                <Carousel.Item interval={1000}>
                    <img
                        className='d-block w-100 '
                        src={pozika2}
                        alt='Third slide'
                        width={100}
                        height={500}
                    />
                    <Carousel.Caption>
                        <h3></h3>
                        <p></p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item interval={1000}>
                    <img
                        className='d-block w-100'
                        src={pozika3}
                        alt='Third slide'
                        width={900}
                        height={500}
                    />
                    <Carousel.Caption>
                        <h3></h3>
                        <p></p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>
        </div>
    </>
    );
 }

  
  function HomePage() {
   return (
    <>
        <HomePageSlideShow />

        
    </>
   );
 }



 export default HomePage;

我的搜索功能在另一个类中，与我的导航栏相同

    import React from 'react';
    import SentencesByWord from './SentencesByWord';
    import { useState } from 'react';
    import { Redirect } from 'react-router-dom';
    import { useHistory } from 'react-router-dom';

    import 'bootstrap/dist/css/bootstrap.min.css';
     import { Navbar, Nav, Form, FormControl, Button } from 'react-bootstrap';
  
    function NavbarFunction() {
    const [sentence, setSentence] = useState('');
    const [fetchu, setFetchu] = useState('');
    const [error, setError] = useState('');
    let history = useHistory();

    const FetchData = () => {
        fetch(`http://localhost:8080/words/showSentences?word=` + sentence)
            .then((response) => response.json())
            .then(setFetchu)
            .then(console.log(fetchu))
            .catch(function (error) {
                console.log('mergi');
                setError("We can't find the word in our database");
            });

        history.push('/home');
    };
    const OnChangerr = (e) => {
        setSentence(e.target.value);
    };

    const HandleKeypress = (e) => {
        if (e.keyCode === 13) {
            FetchData();
        }
    };

    return (
        <>
            <div className='inlineu'>
                <Navbar bg='dark' variant='dark'>
                    <Navbar.Brand href='Home'>LearningVocab</Navbar.Brand>
                    <Nav className='mr-auto'>
                        <Nav.Link href='GiveMeSentences'>
                            Random Sentences
                        </Nav.Link>
                        <Nav.Link href='SendEmail'>
                            Send us your thoughts
                        </Nav.Link>
                        <Nav.Link href='SearchByWord'>Pricing</Nav.Link>
                    </Nav>
                    <Form inline>
                        <FormControl
                            type='text'
                            placeholder='Search'
                            className='mr-sm-2'
                            onChange={OnChangerr}
                            onKeyDown={HandleKeypress}
                        />
                        <Button variant='outline-info' onClick={FetchData}>
                            Search
                        </Button>
                    </Form>
                </Navbar>
            </div>

            {fetchu ? (
                <div>
                    <h1> {fetchu.korfirstSentence} </h1>
                    <h1>{fetchu.kosecondSentence}</h1>
                    <h1>{fetchu.kothirdSentence}</h1>
                    <h1>{fetchu.kowordTranslation}</h1>
                    <h1>{fetchu.kowordId}</h1>
                </div>
            ) : (
                // <h1> {fetchu.kosecondSentence}  </h1>

                <h1 className='someSpace'>{error}</h1>
               )}
           </>
         );
  }

     export default NavbarFunction;

我使用了 css 的 boostrap

我的反应组件树：