Javascript 无法使用react js获取表上的数据

我用reactjs开发了一个表，我想获取数据并将其显示在这个表上

数据显示在控制台上，但不显示在表上

我的代码是：

    constructor(props){
                super(props);
                this.state = {
                    categories: [],
                    file:''};
                  this.onchange = this.onchange.bind(this)
                  this.handleAdd = this.handleAdd.bind(this);
            }
            componentDidMount() {
                axios({
                  method: 'get',
                  url: 'http://172.16.234.24:8000/api/allCategories',
                 headers: {
                'Cors-Allow-Credentials':true,
                'Access-Control-Allow-Credentials':true,
                'Access-Control-Allow-Origin': '172.16.234.24:8000',
                'Access-Control-Allow-Headers':'Content-Type, 
                Authorisation',
                'Content-Type': 'multipart/form-data'
                }
                }).then(response => {
                try { if (response && response.data) {
                    this.setState({ categories: response.data});
                    console.log(response)
                  }
               console.log(this.state.categories)
                }
                catch(error)
                {console.log('noo')}

                }).catch(error => console.log(error));
              }
            handleAdd() {
                try {
                  console.log("Add Categorie")
                  this.props.history.push('/addcategorie');
                }
                catch (error) {
                  this.setState({ error });
                }
              }
            render() {
              let {
                categories
            } = this.state;
                return (
                    <div>
           <Table><thead><tr>
                                  <th scope="col">Name</th>
                                  <th scope="col">Photo</th>
                                </tr>
                              </thead>
                              <tbody>{categories.length && this.state.categories.map(categorie =>  (
                        <tr key={categorie.id}>
                <td>{categorie.name}</td>
                <td>{categorie.file}</td>
                 </tr>
                              ))} </tbody>
                            </Table> 
                    </div>

构造函数（道具）{
超级（道具）；
此.state={
类别：[]，
文件：'}；
this.onchange=this.onchange.bind（this）
this.handleAdd=this.handleAdd.bind（this）；
}
componentDidMount（）{
axios({
方法：“get”，
网址：'http://172.16.234.24:8000/api/allCategories',
标题：{
“Cors允许凭据”：true，
“访问控制允许凭据”：true，
“访问控制允许来源”：“172.16.234.24:8000”，
“访问控制允许标头”：“内容类型，
授权'，
“内容类型”：“多部分/表单数据”
}
})。然后（响应=>{
尝试{if（response&&response.data）{
this.setState（{categories:response.data}）；
console.log（响应）
}
console.log（this.state.categories）
}
捕获（错误）
{console.log（'noo'）}
}).catch（错误=>console.log（错误））；
}
handleAdd（）{
试一试{
console.log（“添加分类”）
this.props.history.push（'/addcategorie'）；
}
捕获（错误）{
this.setState（{error}）；
}
}
render（）{
让{
类别
}=本州；
返回(
名称
照片
{categories.length&&this.state.categories.map（categorie=>(
{categorie.name}
{categorie.file}
))} 

当我运行它时，我得到了

index.js:1446警告：validateDOMNesting（…）：文本节点不能显示为的子节点。

并且我在控制台上得到了数据，但我的表是空的

---

如何修复它？

尝试更改JSX表达式（我添加了

{}

）：

{categories.length&&this.state.categories.map（categorie=>{return(
{categorie.name}
{categorie.file}
))}}

车身开始标记和结束标记之间有一些空格

只需按原样替换下面的代码，然后重试

   <tbody>{categories.length && categories.map(categorie =>  (
        <tr key={categorie.id}>
            <td>{categorie.name}</td>
            <td>{categorie.file}</td>
             </tr>
        ))}</tbody>

{categories.length&&categories.map（categorie=>(
{categorie.name}
{categorie.file}
))}

这可能看起来很傻，但实际上您正在渲染tbody和一些空白（即文本）

更清楚地说

改变

   ))} </tbody>

）}

到

）}

您需要将代码逻辑从

tbody

移动到

tr

进行迭代，或者删除

tbody

标记。

我得到了相同的警告和问题。我还得到了

警告：validateDOMNesting（…）：文本节点不能显示为

   ))} </tbody>

  ))}</tbody>