Estou criando uma pequena lista usando React Hook Form com useFieldArray. Quero filtrar a lista quando o usuário digitar qualquer coisa no campo de pesquisa. No entanto, a filtragem não está funcionando.
Abaixo está meu código:
import React from 'react';
import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form';
import ReactDOM from 'react-dom';
let renderCount = 0;
export function App() {
const { register, control, handleSubmit, reset, watch } = useForm({
defaultValues: {
test: [
{ firstName: 'Bill 1', lastName: 'Luo' },
{ firstName: 'hello2', lastName: 'Luo' },
{ firstName: 'test 3', lastName: 'Luo' },
{ firstName: 'test 4', lastName: 'Luo' },
],
},
});
const { fields, append, prepend, remove, swap, move, insert, replace } =
useFieldArray({
control,
name: 'test',
});
const onSubmit = data => console.log('data', data);
const [searchQuery, setSearchQuery] = React.useState('');
const handleSearchChange = event => {
setSearchQuery(event.target.value);
};
const filteredRows = fields.filter(row =>
row.firstName.toLowerCase().includes(searchQuery.toLowerCase())
);
console.log(JSON.stringify(filteredRows));
return (
<>
<input onChange={handleSearchChange} value={searchQuery} />
<form onSubmit={handleSubmit(onSubmit)}>
<ul>
{filteredRows.map((item, index) => {
return (
<li key={item.id}>
<input
{...register(`test.${index}.firstName`, { required: true })}
/>
<Controller
render={({ field }) => <input {...field} />}
name={`test.${index}.lastName`}
control={control}
/>
</li>
);
})}
</ul>
</form>
</>
);
}
// Log to console
console.log('Hello console');
quando procuro "teste" ele mostra as duas primeiras linhas em vez das duas últimas. Por quê?
Você está usando o índice da lista filtrada ao se referir ao primeiro nome e ao último nome. Você precisa se referir ao índice da lista original