reactjs - 结果页面中的搜索表单 - ReactJs

Question

我正在尝试使用此流程构建一个简单的搜索应用程序：

1 - 搜索页面有一个 SearchBar 和一个包含所有元素的列表。

2 - 在搜索页面中搜索单词（按查询过滤）时，这应该会将您重定向到结果页面。

3 - 如果您想查找不同的单词和下面列出的结果，结果页面有一个 SearchBar。

错误：当搜索不同的单词（例如 AB 而不是 AA）时，我收到一个错误无法读取未定义的属性“结果”，我不知道如何修复它。https://codesandbox.io/s/damp-cloud-k0poc?file=/src/data.js:96-101

我的应用程序基于以下示例：

1 - ReactJS - 使用重定向组件传递道具

2 -从搜索表单重定向到 reactjs 中的结果页面

任何想法将不胜感激。

标签： reactjssearchreact-router-dom

Answer 1

event.preventDefault()应该解决您的问题。

在SearchBar.js中添加event.preventDefault();提交方法以阻止应用重新加载。

submit = (event) => {
    event.preventDefault();
    ...........
    ...........
    ...........
  };