Question

我得到以下错误，我的行没有呈现。我做错了什么？

> index.js:2178 Warning: validateDOMNesting(...): Text nodes cannot
> appear as a child of <tbody>.
>     in tbody (at VendorsPage.js:39)
>     in table (at VendorsPage.js:31)
>     in div (at VendorsPage.js:30)
>     in div (at VendorsPage.js:28)
>     in VendorsPage (created by Connect(VendorsPage))
>     in Connect(VendorsPage) (created by Route)
>     in Route (at App.js:27)
>     in div (at App.js:22)
>     in Router (created by BrowserRouter)
>     in BrowserRouter (at App.js:21)
>     in div (at App.js:20)
>     in App (created by Connect(App))
>     in Connect(App) (at index.js:15)
>     in Provider (at index.js:14)

VendorsPage.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchVendors } from '../actions/index';

class VendorsPage extends Component {
  renderTable() {
    const vendors = this.props.vendors;
    if (vendors) {
      vendors.map((vendor, index) => {
        console.log(JSON.stringify(vendor));
        return (
          <tr key={vendor._id}>
            <td>{index}</td>
            <td>{vendor.code}</td>
            <td>{vendor.name}</td>
          </tr>
        );
      });
    }
  }

  componentWillMount() {
    this.props.dispatch(fetchVendors());
  }

  render() {
    return (
      <div>
        <h1>Vendors</h1>
        <div>
          <table>
            <thead>
              <tr>
                <th>#</th>
                <th>Code</th>
                <th>Name</th>
              </tr>
            </thead>
            <tbody>
              {this.renderTable()}
              }
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

function mapStateToProps({ vendors }) {
  return { vendors };
}

export default connect(mapStateToProps)(VendorsPage);

renderTable（）中的console.log（）确实正确地打印了我的供应商。我尝试删除像其他线程建议的空格，但这不是问题。所有打印都在

之下

Vendors Page

请帮助..

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

0 个答案: