简体   繁体   English

console.log在更改之前打印更改的状态

[英]console.log prints changed state before changing

I'm trying to rearrange div's with React/Redux via Drag&Drop and there is a strange behavoir that i cant explain. 我正在尝试通过Drag&Drop用React / Redux重新排列div,我无法解释一个奇怪的行为。 I have the following reducer (reduced version for readability) 我有以下的reducer(为便于阅读而简化的版本)

There are 5 "console.log" around the middle of the code. 代码中间有5个“ console.log”。 When i log state or structs the chrome console will print the already rearrange version. 当我登录状态结构时 ,Chrome控制台将打印已经重新排列的版本。 why? 为什么?

export default function reducer(
    state={
        structures: [],
        elementUniqueCounter: 0,
        hoveredElement: null,
        DnD: {
            dragContent: null,
            dragOverContent: null,
            dragContentTop: true,
            dragStructure: null,
            dragOverStructure: null,
            dragStructureTop: true,
            content: null,
            mousepositon: {}
        }
    }, action) {
    let DnD = Object.assign({}, state.DnD);
    let structs = state.structures.slice();
    switch (action.type) {
        case "STOP_DRAG_CONTENT":
            let cindex_source;
            let index_source;
            let cindex_target;
            let index_target;
            let foundTarget = false;
            let foundSource = false;

            structs.map(function (struct, index) {
                struct.content.map(function (content, cindex) {
                    if(content.id === DnD.dragOverContent.props.id) {
                        cindex_target = cindex;
                        index_target = index;
                        foundTarget = true;
                    }
                    if(content.id === DnD.dragContent.props.id) {
                        cindex_source = cindex;
                        index_source = index;
                        foundSource = true;
                    }
                });
            });
            console.log(state);
            console.log(index_source);
            console.log(cindex_source);
            console.log(index_target);
            console.log(cindex_target);
            if(index_source !== undefined && cindex_source !== undefined && index_target !== undefined && cindex_target !== undefined) {
                let copy = structs[index_source].content.slice(cindex_source, cindex_source+1)[0];
                copy.content = DnD.content;
                structs[index_source].content.splice(cindex_source, 1);
                if (DnD.dragContentTop) {
                    structs[index_target].content.splice(cindex_target+1, 0, copy);
                } else {
                    structs[index_target].content.splice(cindex_target, 0, copy);
                }
            }

            DnD = {
                dragContent: null,
                dragOverContent: null,
                dragContentTop: true,
                dragStructure: null,
                dragOverStructure: null,
                dragStructureTop: true,
                content: null,
                mousepositon: {}
            };
            return {...state, DnD: DnD, structures: structs};

    }

    return state
}

It's not that it is printing the rearranged version before it happens. 不是它在发生之前打印了重新排列的版本。 It is that it is printing an object that you are mutating. 这是因为它正在打印您要突变的对象。 By the time you look at the object in the console the mutation has already occurred. 当您在控制台中查看对象时,该突变已经发生。

The use of splice is mutating. splice的使用是变异的。

structs[index_source].content.splice(cindex_source, 1);
if (DnD.dragContentTop) {
    structs[index_target].content.splice(cindex_target+1, 0, copy);
} else {
    structs[index_target].content.splice(cindex_target, 0, copy);
}

EDIT: 编辑:

The above mutation is actually mutating the nested properties of state.structures . 上面的突变实际上是在改变state.structures的嵌套属性。 This is happening because .slice() returns a shallow copy of the original object. 这是因为.slice()返回原始对象的浅表副本。

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). slice()方法将数组的一部分的浅表副本返回到从头到尾选择的新数组对象中(不包括end)。 The original array will not be modified. 原始数组将不会被修改。

The objects in the shallow copy are just pointers to the objects in state.structures . 浅表副本中的对象只是state.structures对象的state.structures So when you use .splice() , you mutate those referenced values. 因此,当您使用.splice() ,您会突变那些引用的值。

Here is a snippet to illustrate this. 这是一个片段来说明这一点。 Run it an look at the console.log . console.log运行它。

 const people = [ { name: "Joe", age: "52" }, { name: "Sally", age: "48" } ]; const clonedPeople = people.slice(); console.log("people === clonedPeople: ", people === clonedPeople); console.log("people[0] === clonedPeople[0]: ", people[0] === clonedPeople[0]); const deeplyClonedPeople = JSON.parse(JSON.stringify(people)); console.log("people[0] === deeplyClonedPeople[0]: ", people[0] === deeplyClonedPeople[0]); 

Hope this helps! 希望这可以帮助!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我如何在 React 中 console.log 更改 state? - How do I console.log a changed state in React? 当给组件状态赋值时,为什么console.log 会打印之前的状态? - When value is assigned to components state, why console.log prints the previous state? 函数状态的console.log - Console.log of function state 使用console.log时状态未定义 - State is undefined when using console.log 无法更新我的应用程序的状态,reducer 中的 console.log 显示对象已更改,但状态保持不变 - Unable to update the state of my app, console.log inside reducer shows that object has changed, but the state remains same 反应 - 更新 state 然后执行 console.log,显示未更新的 state - REACT - Updating state and then doing a console.log , shows unupdated state console.log this.state 没有在反应中显示当前状态 - console.log this.state is not showing the current state in react React.js 状态在 console.log 之间发生了巨大变化而没有任何改变(在它已经正确更新之后) - React.js State changes drastically between console.log's without anything changing it (after it already updated itself properly) 使用 console.log 时,我的 reactJs 代码在控制台中打印了两次值 - My reactJs code prints a value twice in console when using console.log 如何使用 React 钩子中的表单进行 console.log 状态? - How do I console.log state with forms in React hooks?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM