获取错误ValidateDOMNesting在reactjs中如何修复它？

Question

我的控制台出错：
下面是content.js的代码，它清楚地显示了所有内容，但是当我的Web应用程序变得复杂时，警告会给出渲染方面的任何问题。 截图：

content.js文件：

class Content extends Component {
    constructor(props){
        super(props);
        this.state = {
            matches:[],
            loading:true
        };
    }

    componentDidMount(){
        fetch('api/matches')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        matches:res,
        loading:false
      })
    })
    }

    render() {
        if (this.state.loading) {
            return <div>>Loading...</div>
        }

    return (
      <div>
          <div class="row">

            <div class="col-lg-3">
                <div id="one">
                    <p class="match">Match {this.state.matches[0].id}</p>
                    <p><h4>{this.state.matches[0].team1}</h4></p>
                    <p>VS</p>
                    <p><h4>{this.state.matches[0].team2}</h4></p>                  <====  LINE   39
                    <div class="winner">
                        <h3>Winner</h3>
                        <h4>{this.state.matches[0].winner}</h4>
                    </div>
                    <div class="stats">
                    <button type="button" class="btn btn-primary">View Stats</button>
                    </div>
                </div>
            </div>
          </div>
      </div>
    );
  }
}

export default Content;

Answer 1

根据此文档document。您可以删除h4标记或删除其外部的p标记。

<p className="your_class">{this.state.matches[0].team1}</p>

或者你可以这样做

<h4>{this.state.matches[0].team1}</h4>