时间戳

首页 > 解决方案 > 无法解构对象

javascript - 无法解构对象

问题描述

我获取了一个包含两个属性的对象，一个是数字，一个是数组。所以我立即访问了数组，然后分配给一个状态，然后通过上下文 api 将每个项目传递给另一个组件。它不工作。这是我的代码：

const [info, setInfo] = useState([]);
const [i, setI] = useState(0);

const fetchUrl = async() => {
    setLoading(true);
    const response = await fetch(url);
    const data = await response.json();
    setInfo(data.results);
    setLoading(false);
} 

useEffect(() => {
    fetchUrl();
}, []);

const {correct_answer, incorrect_answers, question} = info[i];
const arr = [correct_answer, ...incorrect_answers].sort((a, b) => a.length - b.length);

在此代码中，'correct_answer' 是一个字符串，'incorrect_answers' 是一个数组。运行此代码后，它说：

TypeError：无法解构“info[i]”的属性“correct_answer”，因为它未定义。

有时它说：

TypeError: 'incorrect_answers' 不可迭代。

我该如何解决这个问题？

标签： javascriptreactjsfetchreact-context

解决方案

您正在尝试解构一个尚不存在的数组元素。您可以使用此解决方法：

const {correct_answer, incorrect_answers = [], question} = info[i] || {};

请注意，在您从 api 获得响应之前，属性等于 undefined。同样在这里您可以看到我为incorrect_answers属性分配了一个默认值，因此它可以在进一步的代码中传播。

推荐阅读