我是 React 的新手，所以请耐心等待！我认为这是由于生命周期方法造成的，因为这是在状态更新之前渲染的。 我正在尝试学习 Hook，但似乎看不到我做错了什么。

我有一个文件，里面有一个充满对象的数组，处于我的主要状态。然后我创建了另一个名为“Questions”的文件。“choices”应该是一个数组，但这是在传递详细信息之前渲染的。我尝试过“useEffect”，但它进入了一个持续的循环。如果我在最后传递一个空括号，那么我在同一个位置，它会在状态传递之前渲染。我该怎么办？

尝试过 useEffect，但没有成功。

    //top file with state 


    import React, { Component,useState,useEffect } from "react";
    import axios from 'axios'
    import Questions from './Questions'
    import Data from '../Data/Data'
    class Main extends Component {

      constructor(props) {
        super(props);

        this.state={
            nxt:0

        }

    }

    pushData=()=>{
      const {nxt}=this.state;
      this.setState({
          question:Data[nxt].question,
          choices:[Data[0].choice1,Data[0].choice2,Data[0].choice3],
          answer:Data[nxt].answer


      })

    }



    componentDidMount(){
    this.pushData()
    }


    render() {
    const {question,choices,answer}=this.state

    return (
      <div>
    <Questions choices={choices} question={question}/>


      </div>
    )


    }
    }
    export default Main



    import React, { Component,useState,useEffect } from "react";
    import ReactDOM from "react-dom";


    const Questions=({question,choices})=>{

      const [theChoices,setTheChoices] = useState(choices)
    console.log(theChoices,choices)
      return (
        <div>
    <h3>{question} </h3>
    {
    theChoices.map(item => (<h3>{item}</h3>) )
    }
    </div>

    )
    }

    export default Questions

我希望选择中的数组列出