Блог

Главная - Вопросы по программированию - Проблема при создании react-маршрутизатора-dom и передаче крючков (onSubmit)

Проблема при создании react-маршрутизатора-dom и передаче крючков (onSubmit)

#javascript #reactjs

Вопрос:

У меня есть такой компонент маршрутизатора:

 import addProduct from "../components/Products"
[...]

 <BrowserRouter>
            <div className="content">
                <Switch>
                    <Route path="/products">
                        <Products />

                    </Route>
                    <Route path="/add">
                        <AddProduct onSubmit={addProduct} />
                        <Products />
                    </Route>
                </Switch>
            </div>
        </BrowserRouter>

Продукты, которые выглядят так (я вставляю только самые важные вещи):

  const addProduct = async (newProduct) => {
        const response = await axios.post('https://fakestoreapi.com/products', newProduct);
        console.log(response)
        setProducts([...products,response.data])
    }

[...]

inside return I have a link to form, where we can create a new product:


 <NavLink to="/add">
            <h2>Click me to add a new product</h2>
            </NavLink>

Проблема в том , что до того, как я начал делать react-router-dom , мой компонент <AddProduct /> был внутри Products , и я мог немедленно передать addProduct функцию addProduct, поэтому я делал <AddProduct onSubmit={addProduct}/> .
На данный момент я не знаю, что мне делать, чтобы передать свою addProduct функцию <AddProduct> компоненту, когда его сейчас нет внутри Products .

addProduct выглядит так, если это имеет значение в данном случае:

 import ProductsForm from './ProductsForm'
function AddProduct({onSubmit}) {
    return (
        <ProductsForm onSubmit={onSubmit} initialValues={{title: '', price: '', category: '', image: ''}} />
    )
}

export default AddProduct;

Ответ №1:

Похоже, что вы можете извлечь выгоду из системы государственного управления. Вокруг есть несколько, в том числе redux и mobx. Вы также можете «свернуть свой собственный», используя встроенный Context API react. Это позволяет вам хранить свое состояние в одном месте, и только те компоненты, которые в нем нуждаются, подписываются на хранилище данных или функций для изменения этих данных.

Если это только для небольшого приложения, вы можете обойтись без использования контекста (плюс это отличный инструмент у вас на поясе!). Это не так хорошо для больших приложений, так как оно предназначено только для управления небольшими типами данных

Метки: