时间戳

首页 > 解决方案 > 为什么我不能用数组传递道具

reactjs - 为什么我不能用数组传递道具

问题描述

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

我有一个文件，其中包含一个充满对象的数组，它处于我的主要状态。然后我创建了另一个名为“问题”的文件。“选择”应该是一个数组，但这是在传递细节之前呈现的。我尝试了“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

我希望选择中的数组列出

标签： reactjs

解决方案

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

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

更新

为什么会这样？

在第一个渲染（之前componentDidMount）中，您试图传递给Questions两个props被调用的qustions和choices. 问题是，在pushData()调用 get 之前，Main 中不存在此属性state（只是nxt）。所以在里面Question你试着.map()用undefined

当我使用 useState 和 state 作为参数时，为什么“theChoices”不起作用？

传递给的参数useState是initial值。如果您将 aprop作为初始值传递，那么它就是初始值。它不会对 that 的任何更改做出反应prop。在类组件中，我们使用componentDidUpdateor来解决这个问题getDerivedStateFromProps。在功能组件中，您可以添加效果以在每次prop更改时更新状态

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

推荐阅读