Question

我正在同时使用挂钩和功能组件。

在组件内部，我必须使用不变式，但是当我使用它时，会给我带来麻烦。

即使我将像这样的简单布尔条件作为不变条件，也会给我带来以下问题：

var data = {
    practicals: '0',
    checkpoint01: '0',
    checkpoint02: '0',
    checkpoint03: '0',
    checkpoint04: '0',
    checkpoint05: '0',
    checkpoint06: '0',
    checkpoint07: '0',
    checkpoint08: '0',
    checkpoint09: '0',
    checkpoint10: '0',
    total: '0'
};

let res = [];
Object.keys(data).map((key) => {
    console.log(key)
    if(key.startsWith('checkpoint'))
        res.push(data[key])
})
console.log(res)

错误：

引发了跨域错误。 React无法访问开发中的实际错误对象。有关更多信息，请参见....

链接：codesandbox

代码：

invariant(false,..)

Answer 1

由于尝试访问而出现此错误：

options[0].label

而选项可能是一个空数组。

不变之前，请检查选项的长度是否大于0：

if(options.length > 0) {
    invariant(
      typeof options[0].label === "string",
      "One or more options does not have a valid label string. Check the " +
        "`labelKey` prop to ensure that it matches the correct option key and " +
        "provides a string for filtering and display."
    );
}

顺便说一句，如果您在CodeSandbox（Chrome中为f12）中打开DevTools并进入控制台，则会看到更多提示性错误消息

React js不变违反钩子和函数组件

1 个答案: