У меня проблема, которую я пытался решить последние пару дней:
Я использую поставщик контекста для полей формы, и по какой-то причине поля продолжают перезаписывать друг друга, когда я использую memo.
Провайдер:
export const Context = React.createContext();
function Form_Provider({ values, onChange, children }) {
return (
<Context.Provider value={{ values, onChange }}>
{children}
</Context.Provider>
)
});
export default Form_Provider
Поле:
function Field({ label, name }) {
const { values, onChange } = useContext(Context);
return (
<Memorable
label={label}
onChange={({ target: t }) => onChange({ name, value: t.value })}
value={values[name]}
/>
);
}
const Memorable = React.memo(props => {
return (
<Form.Item label={props.label}>
<Input
value={props.value}
onChange={props.onChange}
/>
</Form.Item>
</>
)
}, ({ value: newValue}, { value: oldValue }) => newValue == oldValue)
Форма
const [formValues, setFormValues] = useState({ field1: 'Foo', field2: 'Bar' });
<Form.Provider
values={formValues}
onChange={({ name, value }) => setFormValues({...formValues, [name]: value }))
>
<Form.Field name='field1' label="Field 1" />
<Form.Field name='field2' label="Field 2" />
</Form.Provider>
(Пытался максимально упростить)
В моем фактическом коде я добавил prettifier печати json для отслеживания состояния для каждого поля, и он работает до тех пор, пока каждое поле не будет, когда я редактирую только одно поле. Однако, как только я начинаю редактировать другое поле, первое поле, которое я редактировал, возвращается в исходное состояние и / или в какое-то другое странное состояние между состоянием из прошлого.
Если я не использую Memo, он работает, но это не может быть решением, так как я буду работать с большим количеством полей, и это приведет к частому повторному рендерингу.
Кто-нибудь знает, что здесь происходит?
Добавление:
Я уже пробовал использовать для этого внутренний редуктор и передавать функцию диспетчеризации. Пока я не пытаюсь управлять состоянием вне провайдера, все работает.
