如何循環顯示使數組值復雜化：React.js

Question

我將為返回狀態的顯示數組值創建循環。 現在，我按{text.nameSub [0] .nameSub [0] [0] .nameSub}，{text.nameSub [0] .nameSub [0] [1] .nameSub}顯示，但我不知道create for循環而是這段代碼。 請幫助我，非常感謝您的建議。

import React,{Component} from 'react'
import '../App.css'

class addEntity extends Component {

    constructor(props){
        super(props);
        this.state ={
            index: 1,
            entity: []
        }
    }
    render() {
        return(
            <div>
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Entity Type</th>
                            <th scope="col">Sub-type</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                        {this.state.entity.map((text,index) =>{
                            return(
                                <tr key={text.nameEn}>
                                    <th>{index+1}</th>
                                    <td scope="col">{text.nameEn}</td>
                                    <td scope="col">
                                    {text.nameSub[0].nameSub[0][0].nameSub},
                                    {text.nameSub[0].nameSub[0][1].nameSub}
{/* I will create loop for display it here like this {text.nameSub[0].nameSub[0][i].nameSub} */}
                                    </td>
                                </tr>
                            )
                        })}
                </table>

            </div>
        )
    }
}

export default addEntity;

Answer 1

你可以這樣迭代

{this.state.entity.map((text,index) =>{
     return(
        <tr key={text.nameEn}>
            <th>{index+1}</th> //this might be `td` and not `th`
            <td scope="col">{text.nameEn}</td>
            <td scope="col">
              {text.nameSub[index].map((name,ind) => {
                 return <span>{name[ind].nameSub}</span> 
              })}
            </td>
        </tr>
     )
})}