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"
  },
  {
    ...
  },
  ...
];

我希望当用户输入一个“不存在”的单词时消息显示在屏幕上。到目前为止，该消息将显示整个时间或完全不显示。

当React中没有过滤结果时，我该如何呈现消息？

0 个答案: