create-react-app - React 中没有过滤结果时如何呈现消息？

Question

我有一个搜索栏，可以根据用户输入更新状态。与我设置的关键字不匹配的组件将被过滤掉并且不会呈现到屏幕上。搜索栏中没有匹配项时如何显示消息？

可以在此处的 CodeSandbox 上找到一个示例： https ://codesandbox.io/embed/search-bar-test-odxw8

我正在使用一组对象来存储数据。我正在使用 map 函数将数据分成单独的组件，并使用 filter 函数在用户输入单词时执行重新渲染。

我尝试使用“如果数组长度为 0，则显示消息”的逻辑。问题在于数组显然总是相同的长度，并且与呈现到屏幕上的项目数量无关。

我还尝试使用“如果输入的单词与对象的关键字不匹配，则显示消息”的逻辑。这不会引发错误，但也不会按预期工作。该消息始终可见。

我的状态：

this.state = {
  AnimalList,
  AnimalFilter: ""
};

我的条件逻辑的一个例子：

{/* This is where I'm trying to place the conditional logic */}
{/* For example, typing "pig" should make this appear */}

{this.state.AnimalFilter!== AnimalList.keywords && (
  <h2>No Results</h2>
)}

过滤器和映射方法：

        <div className="container">
          {AnimalList.filter(animal =>
            animal.keywords
              .toLocaleLowerCase()
              .includes(this.state.AnimalFilter.toLocaleLowerCase())
          ).map(({ object1, object2, object3 }, index) => (
            <AnimalCard
              key={index}
              object1={object1}
              object2={object2}
              object3={object3}
            />
          ))}
        </div>

数据：

export default [
  {
    object1: "horse",
    object2: "goat",
    object3: "panda",
    keywords: "horse goat panda"
  },
  {
    object1: "horse",
    object2: "cat",
    object3: "cow",
    keywords: "horse cat cow"
  },
  {
    ...
  },
  ...
];

当用户输入“不存在”的单词时，我希望消息显示在屏幕上。截至目前，该消息将显示整个时间或根本不显示。

标签： create-react-appconditional-rendering