Реагировать не передавая реквизит ребенку - PullRequest
Новая
       8

Реагировать не передавая реквизит ребенку

0 голосов
/ 10 февраля 2020

Я новичок в React и пытаюсь настроить базовое c приложение CRUD в качестве примера.

StackBlitz

В случае моего тега компонента 

<EditProduct 
   products     = {this.state.products} 
   handleSubmit = {this.handleProductUpdate} />

пустой массив products [] передается в props. Я знаю, что state.products заполняется, потому что он переходит к компоненту <Product>, и я вижу его в консоли. Я думал, что это может быть асин c проблема, но это случилось, даже когда я использовал фиктивные данные.

Моя вторая проблема - я не могу извлечь :id из маршрута при вызове http://localhost:3000/update/5e3615179d7a8e01d85147e1, чтобы я мог отфильтровать правильный продукт из state.products [] и передать только выбранный продукт до <EditProduct>. Функция useParams () реакции-роутера-dom не возвращает никаких результатов для меня. Я знаю, что мне нужно передать только один продукт, но у меня также возникают проблемы с извлечением значения /: id из маршрута.

Я нашел учебники по CRUD, но не использовал такой роутер. Я не понимаю, почему это вызвало бы эту проблему. Я работал над этим в течение нескольких дней. Любая помощь будет принята с благодарностью.

Спасибо, Роб

1 Ответ

1 голос
/ 10 февраля 2020

Когда вы используете document.location.replace, это, по сути, перезагрузка страницы, которая размонтирует ваш App компонент и снова подключит его (вы можете проверить, поместив консоль в componentDidMount в App компонент), что означает EditProduct снова получит ваше начальное состояние (которое является пустым массивом), прежде чем оно будет перерисовано с обновленными данными. Однако в конструкторе вы получите только начальное состояние.

Я предлагаю использовать Link компонент, предоставленный react-router-dom, чтобы избежать перезагрузки страницы. Демо

Что касается useParams, это API react-router-dom, который поддерживает React Hooks API, который работает только в функциональных компонентах, а не в компонентах класса.

...