TypeError: props.numberArray.map is not a function react

Question

我在从 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)}
     }

Answer 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()

TypeError: props.numberArray.map is not a function react

TypeError: props.numberArray.map is not a function react

reactjs

react-redux

redux-toolkit