Выбрали другого клиента в списке, а форма редактирования показывает прежнего
function ClientForm({ client }) {
const [email, setEmail] = useState(client.email);
return <input value={email} onChange={(e) => setEmail(e.target.value)} />;
}
// <ClientForm client={selectedClient} />
При выборе другого клиента в списке проп client меняется, а в поле остаётся email первого. Какое решение самое простое и правильное?
- Передать key={client.id}, чтобы при смене клиента форма создавалась заново
- Вызывать setEmail(client.email) прямо в теле компонента
- Заменить useState на useMemo(() => client.email, [client])
- Инициализировать состояние функцией: useState(() => client.email)