文本节点不能显示为子节点 . [React]

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

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"))

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

So basically, What you were doing wrong was updating the same array in consecutive setstate calls. Rerendering happens when there is state change.state change means change of reference. in case of objects and arrays, new object/array has to be assigned every time so that reconciler knows to rerender. This may help

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]} />])
        });