TypeError：props.numberArray.map 不是函数反应

【问题标题】：TypeError: props.numberArray.map is not a function reactTypeError：props.numberArray.map 不是函数反应
【发布时间】：2021-09-15 14:49:34
【问题描述】：

我在从 redux 获取数组时收到 'TypeError: props.numberArray.map is not a function react' 这个错误，如果我使用 redux 的 useSelector 来获取数组数据，它工作正常

组件

 <Typography>Name:{props.name}</Typography> 
  {
     props.numberArray && props.numberArray.map(numbers=> 
          <Typography>{numbers} </Typography>)
 }

redux 连接

const mapStateToProps = (state) =>
{   
    return{
        name:state.name,
        numberArray:state.numberArray,
    }
}

const mapStateToDispatch = (dispatch) =>
{
    return{
           updateName:() =>dispatch(updateName('orange')),           
           numberArray:() =>dispatch(updateNumberArray(15)),
         }    
}

减速器

const initialState = { name:'apple', numberArray:[1,2,3,4]}    

const userReducer = createSlice({ name:'user',initialState,
    reducers:{
         updateName(state,action){ state.name = action.payload },
         updateNumberArray(state,action){ state.numberArray.push(action.payload)}
     }

【问题讨论】：

标签： reactjs react-redux redux-toolkit

【解决方案1】：

mapStateToProps 和 mapStateToDispatch 都定义了 numberArray 属性，因此存在冲突。

属性numberArray 是一个函数（而不是一个数组），因为在mapStateToDispatch 函数返回的对象中有numberArray:() => dispatch(updateNumberArray(15))（顺便说一下，正确的名称应该是mapDispatchToProps）

我会将numberArray 重命名为updateNumberArray

const mapDispatchToProps = (dispatch) => ({
           updateName:() =>dispatch(updateName('orange')),           
           updateNumberArray:() =>dispatch(updateNumberArray(15))
})

在你的组件中你只需要调用props.updateNumberArray()

【讨论】：