javascript - React Hooks - 使用 lodash 的 deepCopy 不会导致重新渲染

Question

我正在使用带有钩子的 React.js 并尝试更改嵌套状态值。
因为我不想直接改变状态，所以我使用了 lodash 的“CloneDeep”函数。
状态更改成功，但没有发生重新渲染，因此在重新输入之前我看不到页面中的更改。
更多信息（在我的 Web 控制台中检查结果）：
console.log(logicalLinesDeepCopy == logicalLines);=> false
console.log(logicalLinesDeepCopy === logicalLines);=> false
console.log(logicalLines[menuLineId].content[menuSentenceId].triggers);=> []
console.log(logicalLinesDeepCopy[menuLineId].content[menuSentenceId].triggers);=> [(object)]

我的代码：

// relevant imports:
import CloneDeep from "lodash/cloneDeep";

// relevant state initiation: (the value is filled before I call the relevant function)
const [logicalLines, setLogicalLines] = useState(null);

// relevant function:
const addTriggerToListInState = (trigger) => {
    // Deep copy:
    let logicalLinesDeepCopy = CloneDeep(logicalLines);
    // Change the deep copy:
    const lineCopy = logicalLinesDeepCopy[menuLineId];
    const triggersListCopy = lineCopy.content[menuSentenceId].triggers;
    triggersListCopy.push(trigger);
    // Some debug checks:
    console.log(logicalLinesDeepCopy == logicalLines);
    console.log(logicalLinesDeepCopy === logicalLines);
    console.log(logicalLines[menuLineId].content[menuSentenceId].triggers);
    console.log(logicalLinesDeepCopy[menuLineId].content[menuSentenceId].triggers);
    // Setting the state:
    setLogicalLines(logicalLinesDeepCopy);
  };

所以看起来新状态的引用和嵌套内容都与前一个不同，那么为什么它不会导致重新渲染，我该如何改变它来导致它呢？

谢谢！

萨皮尔

标签： javascriptreactjsreact-hookslodash