reactjs - ReactJS错误: Invalid attempt to destructure non-iterable instance

Question

我有一个排序过滤器，它采用一个数组来填充选项。尝试查看选项 value 等于数组中的文本，但我在标题中收到错误:

Invalid attempt to destructure non-iterable instance

我需要将文本作为选项标记内的值传递，以便当用户更新过滤器时，正确的文本会显示给用户所做的选择。

这是我的代码:

function Sorting({by, order, rp}: SortingProps) {
    const opts = [
        ['Price (low)', 'price', 'asc'],
        ['Price (high)', 'price', 'desc'],
        ['Discount (low)', 'discount', 'asc'],
        ['Discount (high)', 'discount', 'desc'],
        ['Most popular', 'arrival', 'latest'],
        ['Most recent', 'arrival', 'latest'],
    ];

    const onChange = (i) => {
        const [text, by, order] = opts[i];
        refresh({so: {[by]: order}});
        /* GA TRACKING */
        ga('send', 'event', 'My Shop Sort By', text, 'Used');
    };

    return (
        <div className={cn(shop.sorting, rp.sorting.fill && shop.sortingFill)}>
            <Select className={shop.sortingSelect} label="Sort By" onChange={onChange} value={`${by}:${order}`}>
                {opts.map(([text], i) =>
                    <Option key={i} value={text}>{text}</Option>
                )}
            </Select>
        </div>
    )
}

Answer 1

我多次导致此错误，因为每当我编写 useState 钩子(Hook)(我经常这样做)时，我习惯于使用数组来解构，如下所示:

const [ state, setState ] = useState();

但是我的自定义 Hook 通常返回一个具有属性的对象:

const { data, isLoading } = useMyCustomFetchApiHook();

有时我不小心写了 [ data, isLoading ] 而不是 { data, isLoading }，这会触发此消息，因为您要求解构数组中的属性 [ ]，当您要解构的对象是对象 {} 时。