基于 React 中的输入字段过滤对象数组

Question

在一个相当麻烦的情况下我有一个对象数组

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

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

我需要以某种方式更改数组，以便除了输入的标题外不显示任何内容，如果输入为空则显示整个数组

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

var [arrayOfObjects, setArray] = useState(Json)

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

提前ty

Answer 1

该滤镜阵列的方法是你要寻找的。

这是您的组件可能的样子。

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} />

这是上述代码的工作示例