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

尝试更改您的JSX表达式（我添加了{}）：

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

Answer 2

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

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

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

这似乎很愚蠢，但是您实际上是在渲染tbody和一些空白（即文本）。

更清楚

更改

   ))} </tbody>

收件人

  ))}</tbody>

Answer 3

您需要将代码逻辑从tbody移至tr进行迭代，或删除tbody标签。

无法使用React JS获取表上的数据

3 个答案: