提交到redux中的reducer，而不返回对象json

如何解决提交到redux中的reducer，而不返回对象json

我渲染的这个类别组件。删除即可。但是添加新类别无效。

    import { useSelector,useDispatch } from 'react-redux'
    
    function Category() {
        // data Hook from reducer through store
        const Categories = useSelector(state => state.categories)
        const dispatch = useDispatch()
    
    const handleSubmit = () => {
            dispatch(addCategory(value))
    
            console.log("now is dispatch " + dispatch(addCategory(value)))
    
            isEditing(false)
            setValue('')
    
    }
    
    return (
            <div className="content-wrapper">
                <Breadcrumb title={t("category.label")} />
    
                <div className="content">
                    <div className="container-fluid">
                        <div className="row">
                            <div className="col-md-6 col-sm-12 mx-auto">
                                { msg ? <div className="alert alert-danger">{msg}</div> : null }
                                <Form onSubmit={() => dispatch(addCategory(value)) }>
                                    <Col>
                                        <Form.Group controlId="categoryName">
                                            <Form.Label>Add Category name</Form.Label>
                                            <Form.Control type="text" value={value} onChange={e => setValue(e.target.value)} placeholder="Enter category name" />
                                        </Form.Group>
    
                                        <Button variant="primary" type="submit">
                                            { edit ? "Update" : "Add" }
                                        </Button>
                                    </Col>
                                </Form>
    
                                <br/>
    
                                <ul className="list-group ">
                                    { Categories.map( (category,index) => (
                                        <li key={index} className="list-group-item d-flex justify-content-between align-items-center">{category.name} <span><Button onClick={() => handleEdit(category.id)} className="mr-3">Edit</Button><Button onClick={() => handleDelete(category.id)}>Delete</Button></span></li>
                                    ))}
                                </ul>
                            </div>
    
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    
    export default Category

减速器

    export const CategoryTodo = (state = CATEGORIES,action) => {
        console.log("reducer called")
        switch (action.type) {
            case ADD_CATEGORY:
                console.log("add reducer called")
                // const cate = action.category
                let newCate = { id: Math.floor(Math.random() * 100) + "",name: action.payload }
                const update = state.concat(newCate)
                console.log(update)
                return { 
                    ...update
                }
            
            case DELETE_CATEGORY: 
                const id = action.payload
                console.log("you call in delete reducer" + id);
                return  state.filter(category => category.id !== id)
                
            default:
                console.log("default action")
                return state
        }
    }

当我单击“提交”时，返回不同的对象json。然后，该组件不会渲染类别，因为无法正常工作。我不知道该如何配置。

enter image description here

enter image description here

enter image description here

有人建议我。谢谢！！

解决方法

看着您的Redux-dev-tools图像，很明显您的reducer返回的是json对象而不是数组。所以你的减速器应该这样改变

public enum ChangeType
{
    Unchanged,Deleted,Inserted,Imaginary,Modified
}

尝试类似这样的方法。较早时，您通过散布运算符散布元素，并且由于您正在返回对象，因此它将返回带有内部对象的json对象