Javascript 为什么在React中尝试访问钩子状态中的嵌套数组时出错？ const{useState，useffect}=React //常量url=https://opentdb.com/api.php?amount=10&category=27&type=multiple' 函数主包装器（道具）{ const[num，setNum]=useState（7） 常量[难度，设置难度]=useState（'easy'） 常量[questions，setQuestions]=useState（[]） 常量[answers，setAnswers]=useState（[]） 常量[ErrorAnswers，SetErrorAnswers]=useState（[]） const[page，setPage]=useState（0） 函数生成（）{ 设置问题（[]） 设置错误答案（[]） setAnswers（[]）） var wa=[] 异步函数数据（）{ const data=等待获取(`https://opentdb.com/api.php?amount=${num}&难度=${难点}`） const json=wait data.json（） //常量附加= //const sss=等待承诺( 等待json.results.forEach（异步（项）=>{ 等待设置问题（（上一个）=>[…上一个，项目.问题]） 等待设置答案（（上一个）=>[…上一个，项目。正确答案]） 等待设置错误答案（（上一个）=>[…上一个，项。错误答案]； //console.log（项。错误的\u答案[0]） 返回等待推送（项目回答不正确） }) 返回等待json } （async（）=>{console.log（wait data（））}）（） 控制台日志（wa） 返回wa } 函数prev（）{ 如果（页面>0）{ button.disabled=true； }否则，如果（第>=0页）{ button.disabled=false； 设置页面（prev=>prev-1） 如果（页面>0）{ button.disabled=true；} } } 函数next（）{ 如果（第==（answers.length-1页））{ button.disabled=true； }否则，如果（第prev+1） } } 返回( ) } 功能收音机（{答案，错误答案}）{ 变量a=[] for（设i=0；i 容易的 中等 硬的 输入问题数量： setNum（如target.value） } /> 生成 以前的 下一个 ) } 函数数据（{num，难度，问题，设置问题，答案，设置答案，错误答案，设置错误答案，wa}）{ 返回（“”） } ReactDOM.render（，document.getElementById（'root'））

我对使用React相当陌生。我正在尝试从外部链接获取API以创建基本的测验应用程序。我能够获取数据并将其设置为挂钩状态。“错误答案”状态有一个嵌套数组，主数组中的每个项都包含一组错误答案。我能够访问整个主数组，但我得到了一个React错误或者每当我试图访问其中的单个项时。有人能告诉我这里出了什么问题吗？

React状态更新函数不是异步的，也不返回承诺，它们不能等待，或者更确切地说，等待什么都不做。数组.prototype.push也不是。请包括您看到的错误以及访问此嵌套状态的位置。！错误：未知错误（）！上述错误发生在组件：at MainWrapper（exe1.bundle.js:11:25）中考虑在您的树中添加一个错误边界来自定义错误处理行为。访问以了解更多关于错误边界的错误。错误：引发了一个交叉原点错误。（嗨，里斯，谢谢你的回复，我无法从代码中的任何地方访问数组。我尝试使用obj.toString（）来解决这个问题，但仍然得到了错误。

const { useState, useEffect } = React
    
    // const url = 'https://opentdb.com/api.php?amount=10&category=27&type=multiple'
    function MainWrapper(props) {
        const [num, setNum] = useState(7) 
        const [difficulty, setDifficulty] = useState('easy')
        const [questions, setQuestions] = useState([])
        const [answers, setAnswers] = useState([])
        const [wronganswers, setWrongAnswers] = useState([])
        const [page, setPage] = useState(0)
        
        function generate(){
            setQuestions([])
            setWrongAnswers([])
            setAnswers([])
            var wa = []
            async function data() {
            const data = await fetch(`https://opentdb.com/api.php?amount=${num}&difficulty=${difficulty}`)
            const json = await data.json()
            // const append = 
            // const sss = await Promise.all(
            await json.results.forEach( async (item) => {
 
                await setQuestions((prev) => [...prev, item.question])                
                await setAnswers((prev) => [...prev, item.correct_answer])
                await setWrongAnswers((prev) => [...prev, item.incorrect_answers]);
                // console.log(item.incorrect_answers[0])
                return await wa.push(item.incorrect_answers)
                
            })
            
            return await json
            }
        
           (async () => {console.log(await data())})()
           
           console.log(wa)
           return wa
         }
         
         function prev() {
             if(page>0) {
                 button.disabled = true;
             } else if (page>=0) {
                 button.disabled = false;
                 setPage(prev => prev - 1)
                 if(page>0) {
                 button.disabled = true;}
             }
         }
         
         function next() {
             if(page===(answers.length -1)){
                 button.disabled = true;
             } else if (page < (answers.length -1)) {
                 button.disabled = false;
                 setPage(prev => prev + 1)
             }
         }
    return(<div className="MainContainer" >
    <Input num={num} setNum={setNum} difficulty={difficulty} setDifficulty={setDifficulty} generate={generate} answers={answers} wronganswers={wronganswers}/> 
    <Data num={num} difficulty={difficulty} questions={questions} setQuestions={setQuestions} answers={answers} setAnswers={setAnswers} wronganswers={wronganswers} setWrongAnswers={setWrongAnswers} />
    </div>)
    }
    
    function Radio({answers, wronganswers}) {
        var a = []
        for(let i=0; i < (answers.length); i++){
            // console.log(i)
            a.push(<div key ={i}>
            <input type='radio' name='answer' id={i} value={i} ></input>
            <label htmlFor='answer'>{answers[i]}</label>
            <input type='radio' name='answer' id={i + 10} value={i + 10} ></input>
            <label htmlFor='answer'>{wronganswers[i]}</label>
            </div>)
        }
        return a
    }
    
    function Input({num, difficulty, setNum, setDifficulty, generate, answers, wronganswers, prev, next}) {
        
        return(<div>
        <label>Enter difficulty:  
        <select name='difficulty' id='difficulty' defaultValue={difficulty} onChange={(e) => 
            setDifficulty(e.target.value)
            }>
        <option value='easy' >Easy</option>
        <option value='medium' >Medium</option>
        <option value='hard' >Hard</option>
        </select>
        </label>
        <label>Enter no. of questions:     
        <input placeholder="1" type="number" min='1' max = '50' name='no_of_ques' id='no_of_ques' defaultValue={num} onChange={(e) => 
            setNum(e.target.value)
            } />
        </label>
        <button onClick={generate}>Generate</button>
        <button onClick={prev}>Previous</button>
        <button onClick={next}>Next</button>
        <Radio answers={answers} wronganswers={wronganswers} />
        </div>)
    }
    
    
    function Data({num, difficulty, questions, setQuestions, answers, setAnswers, wronganswers, setWrongAnswers, wa}){
        

    
        return (<div>''</div>)
    }
    

ReactDOM.render(<MainWrapper />, document.getElementById('root'))