时间戳

首页 > 解决方案 > Redux - 传播不可迭代实例的无效尝试

reactjs - Redux - 传播不可迭代实例的无效尝试

问题描述

我正在尝试学习 Redux（与 ReactJS 一起使用），当我尝试添加文章标题时，应用程序崩溃并显示以下内容：

传播不可迭代实例的无效尝试

所以我尝试通过将代码输出到控制台来调试我的代码，我确实得到了我的 ID 和标题，但是在调度ADD_ARTICLE操作时，它不起作用。

这是有问题的具体代码：

减速器

import { ADD_ARTICLE } from "../constants/action-types";

const initialState = {
    articles: []
}

export default ( state = initialState, action ) => {
    switch ( action.type ) {
        case ADD_ARTICLE:
            return [ ...state, action.article ] // Problem line
        default:
            return state
    }
}

动作生成器

import { ADD_ARTICLE } from "../constants/action-types";
import uuid from 'uuid'

export const addArticle = ( { title } = {} ) => {
    return {
        type: ADD_ARTICLE,
        // the payload
        article: {
            id: uuid(),
            title
        }
    }
}

表单组件

import React, { useState } from 'react'
import { connect } from 'react-redux'
import { addArticle } from '../actions/index'

const Form = props => {
    const [title, setTitle] = useState( '' ) // using react hooks

    const handleChange = e => {
        setTitle( e.target.value )
    }

    const handleSubmit = e => {
        e.preventDefault()
        props.addArticle( { title } ) // this is where the action is dispatched
        setTitle( '' )
    }

    return (
        <form onSubmit={ handleSubmit }>
            <label>Title</label>
            <input
                type="text"
                id="title"
                value={ title }
                onChange={ handleChange }
            />
            <button>SAVE</button>
        </form>
    )
}

const mapDispatchToProps = dispatch => {
    return {
        addArticle: article => dispatch( addArticle( article ) ) // dispatching the action
    }
}

export default connect( null, mapDispatchToProps )( Form )

预期的结果应该是添加到基本列表的新文章标题。我确实有三个有效的文章标题的种子，但是当我想添加文章标题时，它会显示上面提到的错误消息。

谢谢你的帮助！

标签： reactjsredux

解决方案

问题是你的状态是一个对象

const initialState = {
    articles: []
}

但在这儿：

case ADD_ARTICLE:
            return [ ...state, action.article ] // Problem line

您正在尝试将对象传播到数组中，并将状态更改为数组）。你不应该这样做。

只是文章变了

我会将其更改为

case ADD_ARTICLE:
     return { ...state, 
         articles: [
             ...state.articles,
             action.article
         ] 
      }

交替，

由于您的initialState(object) 只有一个属性articles，您也可以将其更改为

const initialState = []

这样，您可以保留其余的 reducer 代码。然后，您必须更改从组件中的 reducer 访问信息的方式

推荐阅读