根据 React 中的输入字段过滤对象数组

Posted 2023-02-22

【中文标题】根据 React 中的输入字段过滤对象数组

【英文标题】：Filter Array of Objects based on input field in React

【发布时间】：2020-03-12 13:40:42

【问题描述】：

陷入了相当麻烦的境地 我有一个对象数组

[
   
     "title":"placeholder",
     "text":"placeholder"
   ,
   
     "title":"test",
     "text":"placeholder"
   ,
   
     "title":"javascript",
     "text":"placeholder"
   
]

我将它们显示在一个 div 中，但这并不重要 我有一个输入字段，用户应该输入标题，并且当他们输入数组时，应该只显示匹配的对象。 输入 java 将显示 javascript 标题对象

我需要以某种方式更改数组，使其只显示输入的标题，如果输入为空则显示整个数组

我正在使用 React 但我只能使用钩子 所以我复制了json

var [arrayOfObjects, setArray] = useState(Json)

Json 是从本地文件导入的 arrayOfNotes 是我需要更改的数组 指出这样更容易理解

提前

【问题讨论】：

欢迎来到***！你有没有比这更进一步？您有输入文本值的状态吗？

好吧，我已经完成了整个工作，但是这个过滤器功能，我可以使用简单的 a=docume.getelbyid().value 将输入值复制到变量中，或者我可以设置输入值进入一个状态，我可以接受，我的问题可能会以更好的方式解释：例如有2个标题为“javascript”和“javasssssscript”的对象，我可以通过输入“javasc”或“javass”，但如果用户从“javass”中删除“s”并得到“javas”，我仍然只有 1 个显示，无法取回其他 1

【参考方案1】：

你没有分享你的组件，所以我假设你知道如何获取输入值并调用相应的变量input，除了你有你的原始数组，从你的例子中我判断它被称为Json .

然后您可以按如下方式过滤您的值：

const [arrayOfObjects, setArray] = useState(Json);
const filteredArray = input ?
    originalArray.filter(item => item.title.includes(input) :
    originalArray;

以便稍后您可以将filteredArray 渲染如下：

<ul>
  filteredArray.map(item => (<li>item.title</li>))
</ul>

【讨论】：

您不一定需要filteredArray 状态。您可以直接在render

中过滤它

如果您始终可以访问Json 的初始状态，则为真。如果这个Json 用于服务器请求，则不是这样。

它来自哪里并不重要。关键是显示过滤后的结果，为此您不需要第二个状态。你只需要在render中调用filter

但是当用户输入一些值并删除它之后，你将如何回到原来的状态呢？

只有原始状态，这就是我的观点。实际上，您甚至不需要数组的任何状态来执行 OP 要求的操作，您也可以通过过滤道具来做到这一点

【参考方案2】：

array filter 方法正是您所需要的。

这是您的组件的外观。

const List = ( data ) => 
  const [value, setValue] = useState('')

  return (
    <div>
      <input 
        type="text"
        value=value 
        onChange=e => setValue(e.target.value) 
      />

      data
        .filter(item => 
          if (!value) return true
          if (item.title.includes(value) || item.text.includes(value)) 
            return true
          
        )
        .map(item => (
          <div>
            <h1>item.title</h1>
            <p>item.text</p>
          </div>
        ))
      
    </div>
  )

然后你将你的 json 数据传递给那个组件

<List data=Json />

Here's a working example of the above code