Javascript 无法分解对象的结构

我获取了包含两个属性的and对象，一个是数字，一个是数组。所以我立即访问了数组，然后分配给一个状态，然后通过上下文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);

在这段代码中，“正确答案”是一个字符串，“错误答案”是一个数组。运行此代码后，会显示：

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

有时它会说：

TypeError:“回答不正确”不可编辑

---

如何解决此问题？

您正在尝试对尚不存在的数组元素进行分解。您可以使用以下解决方法：

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

---

请注意，在从api获得响应之前，属性等于未定义。在这里您还可以看到，我为

不正确的回答
属性指定了一个默认值，以便它可以在进一步的代码中传播。
信息[0]
在初始加载时未定义。您可以根据想要显示的内容添加
if（info.length）
，它将在
中抛出一个错误。
回答不正确
，因为这将是错误的undefined@adiga谢谢你的评论，我已经更新了我的答案。