为什么渲染数据不显示？

Question

大家好，我正在创建一个反应页面，我想显示在 this.state 中设置的 try 变量的数据，但想在页面上显示名称数组值**（即显示值）**，但我没有能够显示，但在控制台中显示显示的值

import React, { Component } from 'react'
import axios from 'axios'

class Form extends Component {
    constructor() {
        super();
        this.state = {
            response: [],
            change: [],
            name: [],
            fullname:[],
            try:[],//please see the link in below to see the value of try 

        }
    }

    renderData() {
        return (this.state.try).map((item, index) => {
            const name = item.possible_persons
            let x = ""
            let y = ""
            for (x of name) {
               // console.log(x.names)
                for (y of x.names) {
                    //console.log(y.display)
                    const name = y.display
                    console.log('names',name)
                    //const dis = y.display
                    this.setState({
                        name: x.names.map((X) => x.names)
                    })
                    console.log(this.state.name,'state value')
                }
            }
            return (
                <li>{this.state.name}</li>
            )
        })
    }

    handleAll = (e) => {
        this.setState({ [e.target.name]: e.target.value }) // using this we get the form value from name attribute and display it on alert
        console.log(e.target.value)
    }

    render() {
        return (
            <div className="container">
                <div>
                    <li>    {this.state.try.map((item, index) => <div key={index}>{`change: ${item.possible_persons}  `}</div>)}</li>
                    <li>    {this.state.try.map((item, index) => <div key={index}>{`change: ${item.possible_persons[2].names[0].first}  `}</div>)}</li>
                </div>
               <li> {this.state.name.map((z, index) => { z.display })}</li>
            </div>
            )
    }
}
export default Form;

请看下面的链接

尝试值：- https://github.com/pradeepgorule/react/blob/master/error%20file

完整代码：-https://github.com/pradeepgorule/react/blob/master/error%20code

所以请告诉我应该在哪里更改代码

Answer 1

您还需要渲染嵌套字段：

render() {
    return (
      <div className="container">
        <ul>
          {this.state.try.map(item =>
            item.possible_persons.map(person =>
              person.names.map((name, index) => (
                <li key={index}>{name.display}</li>
              ))
            )
          )}
        </ul>
      </div>
    );
  }

Answer 2

当你使用构造函数时，你应该调用 super!!!

constructor(props) {
  super(props);
  // then do whatever u want
}