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

Posted 2023-02-22

【中文标题】无法使用react js获取表上的数据

【英文标题】：Cannot get a data on the table using react js

【发布时间】：2019-06-15 06:19:06

【问题描述】：

我用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>

当我运行它时，我得到了index.js:1446 Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tbody>.，我在控制台上得到了数据，但我的表是空的。

如何解决？

【参考方案1】：

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

直接替换下面的代码试试

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

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

更清楚

改变

   )) </tbody>

到

  ))</tbody>

【参考方案2】：

尝试改变你的 JSX 表达式（我添加了）：

categories.length && this.state.categories.map(categorie =>   return (
  <tr key=categorie.id>
    <td>categorie.name</td>
    <td>categorie.file</td>
  </tr>
))

【讨论】：

我收到同样的警告和同样的问题。

【参考方案3】：

您需要将代码逻辑从tbody 移动到tr 以进行迭代或删除tbody 标记。

【讨论】：

我也收到Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <table>