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

【问题标题】：Filter Array of Objects based on input field in React根据 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 是我需要更改的数组指出这样更容易理解

提前

【问题讨论】：

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

标签： javascript arrays reactjs filter

【解决方案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

【讨论】：