如何在MUIDatable ReactJs中只循环行而不循环表

我想使用API在表上显示数据，而来自API的数据正在循环。但是我只想要表循环的行，而不是表。若我在结果JSON中有10个数据，它将显示10个表，但我只想显示1个有10行的表

到目前为止，我的代码可以显示数据，但它的循环也可以在表中显示。 有人能帮我把这一行表格循环一下吗

这是我的密码：

App.js

                  import React from "react";
                  import ReactDOM from "react-dom";
                  import MUIDataTable from "mui-datatables";
                  import axios from "axios";
                  import { Link } from 'react-router-dom';

                  class App extends React.Component {
                    constructor(props) {
                      super(props);
                    this.state = {
                      data: [],
                      errors: null,
                      isLoading: true
                    };
                  }

                  getData = async () => {
                    const option = {
                      url: "api/url",
                      method: 'POST',
                      headers: {
                        "Access-Control-Allow-Origin": "*"
                      },
                      data: {
                        "data": {
                          "data" :".."
                        },
                        "encrypt": 0
                      }
                    };
                    axios(option)
                      .then(response => {
                        this.setState({
                          data: response.data.data,
                          isLoading: false,
                        });
                        console.log(response.data);

                      })
                      // If we catch any errors connecting, let's update accordingly
                      .catch(error => {
                        console.log(error.response);
                        this.setState({ error, isLoading: false })
                      }
                      );
                  }

                  componentDidMount() {
                    this.getData();
                  }


                    render() {
                      const { isLoading, data } = this.state;

                      const columns = ["ID","Name];

                      const options = {
                        filterType: "dropdown",
                        responsive: "scroll",
                        selectableRows:false
                      };

                      return (
                        <div>
                        <center><h3>Data</h3></center><br/>

                        {!isLoading ? (
                        data.map(post => {
                          const { id, name} = post;

                          const datatable= [
                            [
                              [id],
                              [name]
                            ]
                          ];

                        return (
                          <MUIDataTable
                          data={datatable}
                          columns={columns}
                          options={options} 
                        />

                       );

                    })
                    ) : (
                      <p>Loading...</p>
                    )}
                      </div>
                      );

                    }
                  }

                  ReactDOM.render(<App />, document.getElementById("root"));
                  export default App

从“React”导入React；
从“react dom”导入react dom；
从“mui数据表”导入MUIDataTable；
从“axios”导入axios；
从'react router dom'导入{Link}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
错误：null，
孤岛加载：正确
};
}
getData=async（）=>{
常量选项={
url:“api/url”，
方法：“POST”，
标题：{
“访问控制允许来源”：“*”
},
数据：{
“数据”：{
“数据”：”
},
“加密”：0
}
};
axios（可选）
。然后（响应=>{
这是我的国家({
数据：response.data.data，
孤岛加载：false，
});
console.log（response.data）；
})
//如果我们发现任何连接错误，让我们相应地更新
.catch（错误=>{
console.log（error.response）；
this.setState（{error，isLoading:false}）
}
);
}
componentDidMount（）{
这是getData（）；
}
render（）{
const{isLoading，data}=this.state；
const columns=[“ID”，“Name]；
常量选项={
filterType:“下拉列表”，
响应：“滚动”，
selectableRows:false
};
返回(
数据

{！正在加载(
data.map（post=>{
const{id，name}=post；
常量数据表=[
[
[id]，
[姓名]
]
];
返回(
);
})
) : (
加载

)}
);
}
}
render（，document.getElementById（“根”））；
导出默认应用程序

---

不要迭代api响应数据并呈现

muitatable

。而是在设置状态（

data

）之前，按照muitatable需要的方式操作数据

axios（选件）
。然后（响应=>{
const tableData=response.data.data.map（post=>{
const{id，name}=post；
返回[id，name]；
}
这是我的国家({
数据：tableData，
孤岛加载：false，
});
console.log（response.data）；
})

然后按如下方式呈现表格：

。。。
返回(
数据

{！正在加载(
)
: (
加载

)}
);
}
...