Javascript 在react.js中搜索失败时，如何返回错误消息

我目前正在学习如何在

react.js

中对网页前端进行编码，为了完成作业，当用户在搜索栏中输入任何不在我的

数据库中的内容时，我需要返回一条消息，说明找不到露营地

例如：

如果他们键入香蕉而不是真实的
营地名称
，则需要显示消息。我相信这是相对简单的，我现在完全不知所措

下面是我的find.js文件的代码：

import Layout from '../components/MyLayout.js';
import React from "react";
import {getInfo} from '../lib/utils.js';

class Find extends React.Component {
  constructor(props) {
    super(props);
    this.state={search: ""};
  }

  handleUpdate(evt){
    this.setState({search: evt.target.value});
  }

  async handleSearch(evt){
    const park = await getInfo(this.state.search);
    this.setState({park});
  }

render() {
  return (
    <Layout>
    <div style={{ margin: "auto auto", width: "600px", textAlign: "center" }}>
        <h1>New Mexico Camground Search</h1>
        <p><input type='text' value={this.state.search} onChange={this.handleUpdate.bind(this)}/></p>
        <div className="button-style" onClick={this.handleSearch.bind(this)}>Submit</div>
        {this.state.park ? <div>
        <br />
        <h3>{this.state.park.name}</h3> 
            <br /><img style={{maxWidth: '400px', maxHeight: "400px"}}
            src={this.state.park.image_url} /> <br />
            <h3>{this.state.park.closest_town}</h3>
            <p>{this.state.park.description} </p>
          </div> : null}
      <style jsx>{`
        h1,
        a {
          font-family: 'Sans';
          color: #ffa500;
        }
        h2,
        a {
            font-family: 'Sans'
            color: #ffa500;
        }
        .button-style {
            margin: auto auto;
            cursor: pointer;
            background-color: #ffa500;
            color: #ffffff;
            width: 100px;
            font-family: "Sans";
        }
        ul {
          padding: 10;
        }
        li {
          list-style: none;
          margin: 5px 0;
        }
        a {
          text-decoration: none;
          color: blue;
        }
        a:hover {
          opacity: 0.6;
        }
      `}</style>
      </div>
    </Layout>
      )
  }
    }
}

export default Find;

从“../components/MyLayout.js”导入布局；
从“React”导入React；
从“../lib/utils.js”导入{getInfo}；
类查找扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={search:：}；
}
手动更新（evt）{
this.setState（{search:evt.target.value}）；
}
异步handleSearch（evt）{
const park=wait getInfo（this.state.search）；
这个.setState（{park}）；
}
render（）{
返回(
新墨西哥州地面搜索

提交
{这是州立公园吗？


{this.state.park.name}



{这是州立公园，最近的城镇}
{this.state.park.description}

：null}
{`
h1，
a{
字体系列：“Sans”；
颜色：#ffa500；
}
h2，
a{
字体系列：“Sans”
颜色：#ffa500；
}
.按钮样式{
保证金：自动；
光标：指针；
背景色：#ffa500；
颜色：#ffffff；
宽度：100px；
字体系列：“Sans”；
}
保险商实验室{
填充：10；
}
李{
列表样式：无；
保证金：5px0；
}
a{
文字装饰：无；
颜色：蓝色；
}
a:悬停{
不透明度：0.6；
}
`}
)
}
}
}
导出默认查找；
您可以使用
try/catch

async handleSearch(evt) {
  try { 
    const park = await getInfo(evt.target.value);
    this.setState({park});
  } catch(error) {
    // do something with error
  }
}

（您也可以直接使用目标值）
您可以使用
try/catch

async handleSearch(evt) {
  try { 
    const park = await getInfo(evt.target.value);
    this.setState({park});
  } catch(error) {
    // do something with error
  }
}

（您也可以直接使用目标值）
是否有办法将此错误打印到网页上？当然。您可以将
searchError
添加到您的状态，并在
catch
语句
this.setState（{searchError:“No results”}）之后打开
，然后在呈现函数的某个地方显示消息
{this.state.searchError}
；（当搜索成功时，请记住清除错误）是否有办法将此错误打印到网页上？当然。您可以将
searchError
添加到您的状态，并在
catch
语句
this.setState（{searchError:“No results”}）之后打开
，然后在呈现函数的某个地方显示消息
{this.state.searchError}
；（当搜索成功时，请记住清除错误）