Question

假设我正在从问题道具中选一个，所以我想根据一个状态访问状态

class Question extends React.Component{
    constructor(props){
        super(props);
        this.state={
            questions:{
                one:{
                    question:"What is html full fomr",
                    options:{
                        a:"hyper text markup language",
                        b:"hyper text model language"
                    },
                    answer:"hyper text markup language",
                    submit:"not",
                    submited_answer:""
                }
            },
            show_question:this.props.question
        }
    }
    render(){
        let question_id=this.state.show_question
        let object=this.state.questions
        console.log(object.question_id.question)
        return "hello world"
    }
}

ReactDOM.render(<Question question='one' />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

这给我一个错误无法读取未定义的属性“问题”

Answer 1

由于props.question是字符串，因此无法通过点符号访问state.questions属性。
console.log(object.question_id.question)

但是您可以使用对象括号表示法，例如：
console.log(object[question_id].question)

以下是您的代码的有效示例：

class Question extends React.Component{
    constructor(props){
        super(props);
        this.state={
            questions:{
                one:{
                    question:"What is html full fomr",
                    options:{
                        a:"hyper text markup language",
                        b:"hyper text model language"
                    },
                    answer:"hyper text markup language",
                    submit:"not",
                    submited_answer:""
                }
            },
            show_question:this.props.question
        }
    }
    render(){
        let question_id=this.state.show_question
        let object=this.state.questions
        console.log(object[question_id].question)
        return "hello world"
    }
}

ReactDOM.render(<Question question='one' />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

好像您要访问问题，其中问题ID在道具中传递。

show_question:this.props.question

所以，现在您需要

render(){
            let question_id=this.state.show_question;
            let object=this.state.questions;
            console.log(object['question_id'].question);
            // this.state.questions['question_id'].question; //directly. 
            return "hello world";
    }

Answer 3

尝试使用object[question_id].question

render() {
      let question_id=this.state.show_question
      let object=this.state.questions

      console.log(object[question_id].question)

      return "hello world"
}

如何根据道具获得状态值

3 个答案: