Question

我是React的新手，请多多包涵！我相信其原因是由于生命周期方法，因为这是在状态更新之前呈现的。我正在尝试学习Hook，但似乎看不到自己做错了什么。

我有一个文件，该文件包含处于我的主状态的充满对象的数组。然后，我创建了另一个名为“问题”的文件。 “选择”应该是一个数组，但这是在传递细节之前呈现的。我尝试了“ useEffect”，但它进入了一个持续循环。如果我在末尾传递了一个空括号，Im处于相同位置，则它将在状态传递之前呈现。我该怎么办？

尝试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

我希望选择的数组列出

Answer 1

questions，choices和answers在第一个渲染中为undefined。在初始状态下声明它

this.state = {
    nxt: 0,
    questions: [],
    answers: [],
    choices : []
}

更新

为什么会这样？

在第一个渲染中（在componentDidMount之前），您试图向下传递到Questions的两个props被调用的qustions和choices。问题是，直到调用pushData()为止，Main的state（只是nxt中才不存在此属性。因此，在Question内部，您尝试在.map()中使用undefined

当我将useState和状态用作参数时，为什么“ theChoices”不起作用？

传递给useState的参数是initial的值。如果您将prop用作初始值，那就只是初始值。它不会对该prop进行任何更改。在类组件中，我们通过使用componentDidUpdate甚至getDerivedStateFromProps来解决此问题。在功能组件中，您可以添加每次prop更改时都会更新状态的效果

useEffect(() =>{
    setTheChoices(choices)
},[choices])

为什么我不能通过数组传递道具

1 个答案: