代码之家 › 专栏 › 技术社区 › Bryce Stampfl

React Redux-将项目添加到商店后,应用程序/商店重置

redux reactjs javascript

Bryce Stampfl · 技术社区 · 5 年前

我不明白为什么当我向商店添加商品时,应用程序会重置。我可以看到它被添加到我的列表中,但随后我可以看到我的所有组件都闪烁并重新加载。检查控制台不会显示任何警告。

我还将addProduct组件和productsSlice插入redux模板,它也重新加载了应用程序。

添加带有钩子的产品的基本HTML:

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { addProduct } from '../_reducers/productsSlice'

const AddProduct = () => {
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('')
    const [price, setPrice] = useState('')

    const onTitleChanged = e => setTitle(e.target.value);
    const onDescriptionChanged = e => setDescription(e.target.value);
    const onPriceChanged = e => setPrice(e.target.value);

    const dispatch = useDispatch();


    return (
        <section>
            <h2>Add a new Product</h2>
            <form>
                <label htmlFor="Title">Title</label>
                <input
                    type="text"
                    name="title"
                    value={title}
                    onChange={onTitleChanged} />

                <label htmlFor="Price">Price</label>
                <input
                    type="text"
                    value={price}
                    onChange={onPriceChanged} />

                <label htmlFor="Description">Description</label>
                <textarea
                    value={description}
                    onChange={onDescriptionChanged} />

                <button onClick={() => dispatch(addProduct({
                    title: title,
                    price: price,
                    description: description
                }))}>
                    Submit
                </button>
            </form>
        </section>
    )
}

export default AddProduct;

我的减速器:

import { createSlice } from '@reduxjs/toolkit'

const initialProductsState = [
    // { name: '1', price: 10, description: 'testDescrip1' },
    // { name: '2', price: 20, description: 'testDescrip2' },
    // { name: '3', price: 30, description: 'testDescrip3' },
    { name: '4', price: 40, description: 'testDescrip4' }]



export const productsSlice = createSlice({
    name: 'products',
    initialState: initialProductsState,
    reducers: {
        addProduct: (state, action) => {
            state.push(action.payload)
        },
    }
})

export const { addProduct } = productsSlice.actions;


export default productsSlice.reducer

产品列表:

import React from 'react';
import { useSelector } from 'react-redux'
import { Row, Col } from 'react-bootstrap'
import ProductItem from "./ProductItem"


const ProductList = () => {

    const products = useSelector(state => state.products)
    let numberRendered = 3;

    const renderedProducts = products.map(item => (
            <ProductItem product={item} />
    ))

    return (
        <div id="ProductList">
            <Row>
                <Col>
                    {renderedProducts}
                </Col>
            </Row>
        </div>
    )
}

export default ProductList;

产品组件采用reactbootstrap风格:

import React from 'react';
import {productSlice} from '../_reducers/productsSlice';
import { Card, Col, Row } from 'react-bootstrap'

const ProductItem = (props) => {


    return (
        <Card>
            <Card.Body>
                <Row>
                    <Col md={4}>
                        <Card.Img variant="float" src={process.env.PUBLIC_URL + 'placeholder.png'} />

                    </Col>
                    <Col md={8}>
                        <Card.Title>{props.product.title}</Card.Title>

                        <Card.Text>{props.product.description}</Card.Text>
                        <Card.Subtitle>{props.product.price}</Card.Subtitle>
                    </Col>
                </Row>



            </Card.Body>
        </Card>
    )
}

export default ProductItem;

商店:

import { configureStore } from '@reduxjs/toolkit'
import productsSlice from '../src/_reducers/productsSlice'

const store = configureStore({
    reducer: {
        products: productsSlice,
    }
})

export default store;

0 回复 | 直到 5 年前

Dakota Lee Martinez 5 年前

很确定你只需要添加一个 event.preventDefault() 到表单的提交事件

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { addProduct } from '../_reducers/productsSlice'

const AddProduct = () => {
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('')
    const [price, setPrice] = useState('')

    const onTitleChanged = e => setTitle(e.target.value);
    const onDescriptionChanged = e => setDescription(e.target.value);
    const onPriceChanged = e => setPrice(e.target.value);

    const dispatch = useDispatch();


    const handleSubmit = (e) => {
      e.preventDefault();
      dispatch(addProduct({
        title: title,
        price: price,
        description: description
      }))
    }
    return (
        <section>
            <h2>Add a new Product</h2>
            <form onSubmit={handleSubmit}>
                <label htmlFor="Title">Title</label>
                <input
                    type="text"
                    name="title"
                    value={title}
                    onChange={onTitleChanged} />

                <label htmlFor="Price">Price</label>
                <input
                    type="text"
                    value={price}
                    onChange={onPriceChanged} />

                <label htmlFor="Description">Description</label>
                <textarea
                    value={description}
                    onChange={onDescriptionChanged} />

                <button type="submit">
                    Submit
                </button>
            </form>
        </section>
    )
}

export default AddProduct;

没有 preventDefault 提交表单将向同一路由提交get请求,这将导致组件重新加载。