状态未初始化为初始状态答案

【问题标题】：State is not getting initialized to the initial state状态未初始化为初始状态
【发布时间】：2019-05-08 20:27:23
【问题描述】：

我是react-redux 的新手。

现在我有一个类似的对象，

const initialState = {
        Low: [
            {
                id: 0,
                technologyId: 0,
                technology: '',
                level: 'EASY'
            }
        ],
        Medium: [
            {
                id: 0,
                technologyId: 0,
                technology: '',
                level: 'MEDIUM'
            }
        ],
        High: [
            {
                id: 0,
                technologyId: 0,
                technology: '',
                level: 'TOUGH'
            }
        ]
    }

Now, 

    export default function QuizData(state = initialState, action) {
        switch (action.type) {
            case QUIZ_DATA:
                return {
                    ...state,
                    Low: action.data,
                    error: false,
                } 
            case RESET_SETUP_QUIZ: {
            console.log("intial state is ",  ...state);
            return {
                ...state
            }

现在，这里发生的事情是在一些操作之后，这个对象随着每个键都有一些值而发生变化。喜欢，

所以，这会改变。

{
        Low: [
            {
                id: 0,
                technologyId: 11,
                technology: 'xsxs',
                level: 'EASY'
            }
        ],
        Medium: [
            {
                id: 0,
                technologyId: 22,
                technology: 'swwsw',
                level: 'MEDIUM'
            }
        ],
        High: [
            {
                id: 0,
                technologyId: 110,
                technology: 'xsxsx',
                level: 'TOUGH'
            }
        ]
    }

现在，我想做的是，

当用户单击按钮时，我想将其更改为初始状态。

因此它不会有任何值，因为它应该与默认值相同。

所以，我试过了

return {
   initalState
}

但后来我尝试使用object.assign。

case QUIZ_DATA:
  return Object.assign(
    {},
    state,
    {
      Low: action.data,
      error: false
    }
  )

但在这里它仍然只复制第一级变量。

所以，我仍然无法做到这一点。

谁能帮我解决这个问题？

【问题讨论】：

首先我注意到，对于action.type 的默认条件，您没有返回任何内容。返回default: 上的状态。第二件事 return { ...state, low: action.data, error: false } 应该开箱即用。是否可以在某个地方的 codepen/fiddle 上设置一个失败的示例？

标签： javascript reactjs redux react-redux reducers

【解决方案1】：

Object.assign 对深拷贝没有帮助。

如果你想做深拷贝使用。

let newObj = JSON.parse(JSON.stringify(obj));

这里 newObj 将是深拷贝。

【讨论】：

【解决方案2】：

要重置为初始状态，您只需：

case RESET_SETUP_QUIZ: {
    return initialState;

就是这样。在第一次调用 reducer 函数时，state 将是当前状态，而不是初始状态。

【讨论】：

在你的问题中，你在一个对象内部返回initialState，就像这样return { initialState };你只需要返回initialState。
所以，这就是我所说的，我想在单击按钮后将其设置为初始状态
如果我的回答不起作用，您需要提供更多信息。你的动作是什么样的。当你发送它时会发生什么？
嘿，我在经过一些操作后添加了我的状态有该数据。

【解决方案3】：

请注意，对于action.type 的默认条件，您不会返回任何内容。返回default: 上的状态。第二件事 return { ...state, low: action.data, error: false } 应该开箱即用。

export default function QuizData(state = initialState, action) {
    switch (action.type) {
        case QUIZ_DATA:
            return {
                ...state,
                Low: action.data,
                error: false,
            } 
        case RESET_SETUP_QUIZ: {
            console.log("intial state is ",  ...state);
            return {
                ...state
            }
        }
        default: {
            return state;
        }
    }
}

【讨论】：

【解决方案4】：

这是错误的：

case RESET_SETUP_QUIZ: {
        console.log("intial state is ",  ...state);
        return {
            initialState
        }

你应该

case RESET_SETUP_QUIZ: {
        console.log("intial state is ", initialState);
        return initialState;

或者

 case RESET_SETUP_QUIZ: {
        console.log("intial state is ", initialState);
        return {
           ...initialState
        };

【讨论】：