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

Question

我用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>.我在控制台上获得了数据，但我的表是空的。

如何解决？

Answer 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>