无法使用React将数据渲染到页面

时间:2017-05-25 15:44:04

标签: javascript reactjs express react-jsx

我正在尝试从heroku数据库中提取数据并渲染到页面。所有信息都被正确记录,但是,返回数据给了我这个问题。比较question_id和answer_id的值是否正常工作。我希望能够提出一个问题,其中包含与该问题相关的所有答案(即e.question + f.answer)

我在地图和过滤方法中的返回有什么问题?

class Questions extends Component{
constructor(props){
    super(props)
    this.state = {
        finddata: [],
        allQuestions: [],
        relAnswers: [],
    }
}

componentWillMount(){
    this.renderQuestions();
    this.checkNewUrl();
}
checkNewUrl(){
    let newUrl = 'https://project-overflow-db.herokuapp.com/QA/1'
    axios.get(newUrl)
    .then((res) => {
        console.log('whats new return-->', res.data);
        let alldata = res.data
        this.setState({
            finddata: res.data,
            allQuestions: alldata.questions,
            relAnswers: alldata.answers
        })
    })
}

renderNew(){
    console.log('does this STATE SHOW', this.state.finddata);
    let x = this.state.finddata;
    console.log('THIS IS THE XXXXXXX-->', x);
    console.log('CONVERT TO ARRAY', Object.values(x));

    return (this.state.allQuestions.map((e) =>{
        // return <h1> {e.question} </h1>
        console.log('SHOW ME THE MONEY',e.question);
        return this.state.relAnswers.filter((f) => {
                if(f.question_id === e.question_id){
                    console.log('show me the QUESTION', e.question)      
                    console.log('got it', f.answer)
                    // return <div {f.answer} </div>
                }
            })
})
    )
}
render(){
    return(
        <div>
            <h1 style={styles}> {this.props.match.params.id} </h1>

            {this.renderNew()}  

            {this.props.handleSubmit}
        </div>
    )
}
}

export default Questions

0 个答案:

没有答案