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是我需要更改的数组指出，这样更容易理解

提前预订

Answer 1

您正在寻找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

Answer 2

您没有共享您的组件，所以我假设您知道如何获取输入值并调用相应的变量input，除了您拥有原始数组之外，根据您的示例，我将其称为{ {1}}。

然后，您可以按以下步骤过滤值：

Json

这样以后您就可以按如下所示渲染const [arrayOfObjects, setArray] = useState(Json); const filteredArray = input ? originalArray.filter(item => item.title.includes(input) : originalArray;了：

filteredArray

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

2 个答案: