文本節點不能作為以下子項出現 <tbody> 。 [陣營]

Question

渲染我的React組件時出現錯誤，我認為這與表在組件之間的嵌套方式有關。

我收到此錯誤Text nodes cannot appear as a child of <tbody>

我在這里和這里都在尋找答案，但是我看不到嵌套表格在做什么，以得到此錯誤。

我的桌子嵌套是：

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

因此，基本上，您做錯的是在連續的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]} />])
        });