Question

我在渲染我的反应组件时遇到错误，而且我认为必须考虑我的表是如何嵌套在组件之间的。

我收到此错误Text nodes cannot appear as a child of <tbody>

我正在查看答案here和here，但我无法看到我在表格嵌套方面出错，以获得此错误。

我的桌子嵌套是：

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

这是我的代码：

import React, {Component} from 'react';
import './App.css';

class DataTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataBaseJSON: {},
            dataBaseItems: []
        };
    }

    componentDidMount() {
        fetch('https://ghibliapi.herokuapp.com/films').then(results => {
            return results.json();

        }).then(jsonResults => {
            this.setState({
                dataBaseJSON: jsonResults
            });
            return jsonResults

        }).then(jsonResults => {
            Object.keys(jsonResults).forEach(movieObject => {
                this.setState({
                    dataBaseItems: this.state.dataBaseItems.push(<DataRow key={this.state.dataBaseJSON[movieObject].id}
                                                                          item={this.state.dataBaseJSON[movieObject]}/>)
                })
            });
        })
    }

    render() {

        return (
            <table>
                <thead>
                <tr>
                    <th>Title</th>
                    <th>Director</th>
                    <th>Producer</th>
                    <th>Release Date</th>
                    <th>Rotten Tomato Score</th>
                </tr>
                </thead>
                <tbody>
                {this.state.dataBaseItems}
                </tbody>
            </table>

        )
    }
}

class DataRow extends Component {
    render() {
        return (
            <tr>
                <td>{this.props.item.title}</td>
                <td>{this.props.item.director}</td>
                <td>{this.props.item.producer}</td>
                <td>{this.props.item.release_date}</td>
                <td>{this.props.item.rt_score}</td>
            </tr>
        )
    }
}

class App extends Component {
    render() {
        return (
            <div>
                <h1 className="App-title">Welcome to React</h1>
                <div>
                    <DataTable/>
                </div>
            </div>

        );
    }
}

export default App;

Answer 1

＆＃13;

class DataTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataBaseJSON: {},
            dataBaseItems: []
        };
    }

    componentDidMount() {
      fetch('https://ghibliapi.herokuapp.com/films').then(results => {
            return results.json();

        }).then(jsonResults => {
        debugger
            this.setState({
                dataBaseJSON: jsonResults
            });
            return jsonResults

        }).then(jsonResults => {
            Object.keys(jsonResults).forEach(movieObject => {
                this.setState({
                    dataBaseItems: [
                    ...this.state.dataBaseItems,
                    <DataRow key={this.state.dataBaseJSON[movieObject].id}
                                                                          item={this.state.dataBaseJSON[movieObject]}/>
                    ]
                })
            });
        })
    }

    render() {

        return (
            <table>
                <thead>
                <tr>
                    <th>Title</th>
                    <th>Director</th>
                    <th>Producer</th>
                    <th>Release Date</th>
                    <th>Rotten Tomato Score</th>
                </tr>
                </thead>
                <tbody>
                {this.state.dataBaseItems}
                </tbody>
            </table>

        )
    }
}

class DataRow extends React.Component {
    render() {
        return (
            <tr>
                <td>{this.props.item.title}</td>
                <td>{this.props.item.director}</td>
                <td>{this.props.item.producer}</td>
                <td>{this.props.item.release_date}</td>
                <td>{this.props.item.rt_score}</td>
            </tr>
        )
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <h1 className="App-title">Welcome to React</h1>
                <div>
                    <DataTable/>
                </div>
            </div>

        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

＆＃13;

＆＃13; 所以基本上，你做错了是在连续的setstate调用中更新相同的数组。当状态发生变化时重新发生。状态变化意味着参考变化。在对象和数组的情况下，每次都必须分配新的对象/数组，以便协调者知道要重新渲染。这可能会有所帮助

Answer 2

您的push会直接改变状态，这可能会导致容易出错的代码。

this.state.dataBaseItems.push(<DataRow key={this.state.dataBaseJSON[movieObject].id}
                                       item={this.state.dataBaseJSON[movieObject]}/>)

您可以使用concat来获得更清晰的语法，因为它返回一个新数组。

 this.setState({
          dataBaseItems: this.state.dataBaseItems.concat([<DataRow key={this.state.dataBaseJSON[movieObject].id}
                                                                   item={this.state.dataBaseJSON[movieObject]} />])
        });

文本节点不能显示为子节点。 [阵营]

2 个答案: