0

Имеется простая форма с 2-мя инпутами, на каждом из которых весит обработчик onChange и компонент Map. При вводе значений в инпут обновляется компонент Map(он перерендывается), как этого избежать.

function Order() {
const [street, setStreet] = useState('')
const [house, setHouse] = useState('')

const valueToState = (e) => {
    const name = e.target.name
    const value = e.target.value

    switch(name){
        case 'street':
            setStreet(value)
            break
        case 'house':
            setHouse(value)
            break
        default:
            break
    }
}

const submitForm = (e) => {
    e.preventDefault()
}

return (
    <div className="order">
        <div className="order__container">
            <form onSubmit={submitForm}>
                <input type="text" name='street' placeholder='Улица' value={street} onChange={valueToState}/>
                <input type="text" name='house' placeholder='Дом' value={house} onChange={valueToState}/>
                <button>Найти</button>
            </form>
            <Map />
        </div>
    </div>
)
}

1 ответ 1

0

Компонента ререндится когда изменяются State или Props, в твоем случае valueToState.

В Map компоненте

export default React.memo(<Map/>)

Memo или PureComponent хранят в кеше прошлые пропсы и сравнивает их с пришедшими, если разные то заново рендерит.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.