Question

我已经学习React几周了，我正在尝试构建一个游戏，其中一个对象问题正在呈现给DOM，但是我不确定该怎么做？我已经建立了一个辅助函数，可以从该API响应中创建所有组件，但是，它当然可以呈现我的所有组件，而不仅仅是一个组件。是否需要CSS来更改显示？还是可以使用某些JS逻辑来完成？

class Main extends Component{

    state = {
        quesArr: [],
        ansArr: []
    }



    componentDidMount(){
        fetch('http://localhost:3500/questions')
            .then(quesArr => quesArr.json())
                .then(newQuesArr => {
                    this.setState({
                        quesArr: [...newQuesArr]
                    })
                })
                fetch('http://localhost:3500/answers')
                        .then(answerArr => answerArr.json())
                            .then(newAnsArr =>{
                                this.setState({
                                    ansArr: newAnsArr
                                })
                            })
                }



    render(){
       let questions = this.state.quesArr
       const renderQues = () => (
           questions.map((question, index) => <Question questionObj={question} key={index}/>)
       )


        return (
            <div>
                Questions go here:
                {renderQues()}
                Answers go here:



            </div>
        )
    }
} 

export default Main;

Answer 1

您不需要地图，您只需要显示第一个问题，然后有一个按钮来增加当前问题索引。（我在进行更改的行上方添加了// change）

class Main extends Component{

    state = {
        //change
        activeQ: 0,
        quesArr: [],
        ansArr: []
    }


    componentDidMount(){
        fetch('http://localhost:3500/questions')
        .then(quesArr => quesArr.json())
        .then(newQuesArr => {
            this.setState({
                quesArr: [...newQuesArr]
            })
        })
    fetch('http://localhost:3500/answers')
        .then(answerArr => answerArr.json())
        .then(newAnsArr =>{
            this.setState({
                ansArr: newAnsArr
            })
        })
    }

    //change
    updateActiveQuestion = () => this.setState((prevState) => {activeQ: prevState.activeQ + 1})



    render(){
        let questions = this.state.quesArr
        const renderQues = () => (
        questions.map((question, index) => <Question questionObj={question} key= {index}/>)
    )


    return (
        <div>
            Questions go here:

            //change
            <Question questionObj={questions[this.state.activeQ]}/>
            <button onClick={() => this.updateActiveQuestion()}>Next Question</button>
            Answers go here:

        </div>
        )
    }
}

这不是一个完整的解决方案，它不会限制用户在没有其他问题时单击下一步。

希望这会有所帮助

我正在尝试一次用一个对象数组向DOM渲染一个组件

1 个答案: