Question

当我尝试在console.log中访问数组中的对象时，它可以工作，但是在页面上显示时却不起作用，为什么？

当我使用地图时，它可以工作，但是尝试仅访问一个元素却不能。

状态已初始化

type State = {
    id_evaluation: string,
    questions: Array<{
        id: number,
        question_content_id: number,
        component: Array<{
            type_desc: string,
            content: string,
        }>,
    }>,
    current_question: number,

};

这项工作

class Evaluation extends Component < Props, State > {
    state = {
        id_evaluation: '',
        questions: [],
        current_question: 0,
    }

    componentDidMount() {
        const id_eval = getEvaluation();

        this.setState({
            id_evaluation: String(id_eval),
            }, () => api.get("/evaluation/" + this.state.id_evaluation + "/")
                    .then(response => {
                        this.setState({
                            questions: response.data.question
                            });
                            console.log(this.state.questions[0].component[0].content)
                    })
        );
    }

这不起作用

render () {
    return (

        <div>
            {this.state.questions[0].component[0].content}
        </div>

    )
}

Answer 1

您问它为什么起作用，为什么会起作用，因为reacts让您知道发生的事件的编年顺序，并且由于该再现发生在“ componentDidMount”-source之前，因此请看一下在lifecycle chart之后。

Answer 2

在初始化state时，您的this.state.questions是[]，因此this.state.questions.[0].component[0]将导致错误。尝试先验证您的阵列：

render () {
    return (

        <div>
            {this.state.questions.length > 0 ? this.state.questions.[0].component[0].content : null}
        </div>

    )
}

为什么不渲染我无法访问状态数组？

2 个答案: