Redux TypeError：传播不可迭代实例的无效尝试。为了可迭代，非数组对象必须有一个 [Symbol.iterator]() 方法

Question

我是一个将 redux 与我的代码集成的初学者，但是当我从自动标签中选择一个标签时，我遇到了这个错误，它给出了错误不可迭代实例。通过给 redux 空状态 [{name:'ABC'}] 进行测试后，删除减速器工作正常 所以请指导我解决我的 addtags redux 函数的问题。

第一屏：

class Page2 extends React.Component {

      componentDidMount(){
        this.props.fetchTags(); 
      }
      
      handleSubmit = () => {
        addItem(this.props.tags.currentTags);
        ToastAndroid.show('Symptoms saved successfully', ToastAndroid.SHORT)
      };
    
      handleDelete = index => {
          this.props.deleteTags(index)
       }
       
      handleAddition = suggestion => {
        
          this.props.addTags(suggestion)
          console.log(this.props.tags.currentTags)
       }
      
      render() {
        
        return (
          <View style={styles.container}>
              <View style={styles.autocompleteContainer}>
                <AutoTags  // Text adding component with auto completion feature and bubble feature
                    suggestions={this.props.tags.storedTags}
                    tagsSelected={this.props.tags.currentTags}
                    handleAddition={this.handleAddition}
                    handleDelete={this.handleDelete}
                    placeholder="Add a Symptom.." />
              </View>
              <TouchableHighlight //  wrapper for making views respond properly to touches
                style={styles.button}
                underlayColor="blue"
                onPress={() => {this.props.navigation.navigate('Diagnosis'); this.handleSubmit();}}>
                  <Text style={styles.buttonText}>Search</Text>
              </TouchableHighlight>
            </View>
        );
      }
    }
    const mapStateToProps = (state) => {
      return { 
        tags: state.tags,
      }
    }
    
    const mapDispatchToProps = {
      addTags,
      deleteTags,
      fetchTags
    }
    
    
    export default connect(mapStateToProps, mapDispatchToProps)(Page2);

减速机：

import {ADD_TAGS,DELETE_TAGS , FETCH_TAGS,QUERY_RESULT } from '../actions/tags/tagsActionTypes'
import firebase  from '../../config';


const db= firebase.firestore();// connect with firestore of firebase 
let itemsRef = db.collection('datasetSymptom');


const initialState = {
   currentTags: [],
   storedTags:[],
   result:[]

}
const tagsReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_TAGS:
        return {
            ...state,
            currentTags: [...state.currentTags,  action.payload] 
        };
            break
        case DELETE_TAGS:
            const newArray = [...state.currentTags] //Copying state array
            newArray.splice(action.payload,1);
            //using splice to insert at an index
            return {
            ...state,
            currentTags: newArray //reassigning todos array to new array
            }
            break
        case FETCH_TAGS:
            const storedTags=[];
            itemsRef.get().then(querySnapshot => {// fetching dataset Symptom collection all documents using snapshot
            querySnapshot.docs.forEach(doc => {storedTags.push({'name':doc.id});});//on each and storing it in 'name' key : symptom name form as aked by  autotags component
            });
            return {
                storedTags: storedTags
            }
            break
        default:
            return state;
    }
};

export default tagsReducer

功能：

export const addTags = (tag_id) => {
    return {
        type: ADD_TAGS,
        payload: tag_id
    }
};

Answer 1

我的代码也出现了类似的错误，因为我也使用了一个数组，就像你的 currentTags 一样。我能够通过在减速器中添加条件检查来解决我的问题。 问题是您正在尝试对 currentTags 使用扩展运算符，但在 initialState 中它是空的。我认为以下可能是您的解决方案，并且可以根据对我有用的方法解决您的问题。对于您的 ADD_TAGS 代码，将其替换为以下代码：

case ADD_TAGS:
    return currentTags ?
    {
       ...state,
       currentTags: [...state.currentTags,  action.payload] 
    };
    :
    {
       ...state,
       currentTags: [state.currentTags,  action.payload] 
    };
   break