Reactjs React Js:React.Children.仅应接收单个React元素子元素

我正在使用

请求进行api调用。get

。当我在

request.get中设置state时，我得到了这个错误

我的错误：-

  16 |     },function(err,resp,body){
  17 |         var data = JSON.parse(body)
  18 |         console.log(data)
> 19 |         that.setState({internship_data:data})
  20 |     })
  21 | }
  22 | render(){

我的代码：-

import React,{Component} from 'react'
import '../assets/styles/internship_form.css'
import {Collapse} from 'react-bootstrap'
import request from 'request'

class Support extends Component {
    constructor(props){
        super(props)

        this.state = {
            internship_data:null
        }
    } 
    componentWillMount(){
        const that = this;
        var internship_id = this.props.params.id;
        var data = null
        request.get({
            url:`http://www.myapi.com:1441/internshipbuffer/${internship_id}`,
            headers:{
                'Authorization':`Bearer ${localStorage.getItem('auth-token')}`
            }
        },function(err,resp,body){
            var data = JSON.parse(body)
            console.log(data)
            that.setState({internship_data:data})
        })
    }
    render(){
        return (
            <div>
                {
                    this.state.internship_data ? this.renderContent() : this.renderLoading()
                }
            </div>
        )
    }
    renderLoading = () => {
        return (
            <div style={{marginTop:'100px'}}>Loading....</div>
        )
    }
    renderContent = () => {
        // const that = this;
        var data = this.state.internship_data;
        return (
            <div className="card">
                <div className="img-container">
                    <img alt="Brand Logo" src={data.asset_url} className="img-circle" id="brand-logo" width="50"/>
                </div>
                <ul className="card-brand-info-container">
                    <li>{data.brand_name}</li>
                    <li>Brand manager: {data.brand_manager}</li>
                </ul>
                <button type="button" className="btn btn-default" id="review-btn" onClick={this.reviewAction} >Review</button>
                <button type="button" className="btn btn-default" id="reject-btn" >Reject</button>

                <Collapse isOpened={this.state.isOpened} className="hidden-brand-info" >
                    <div>Title : {data.position_name}</div>
                        <div>Description : {data.description}</div>
                        <div>Positions : {data.postions}</div>
                        <div>Intenship Period : {data.period} </div>
                        <div>
                            Benefits :
                            {/* <ul className="benefits-list">
                                {data.benefits && data.benefits.map(function(item,i){
                                    return <li key={i} >{i+1}.{item}</li>
                                })}
                            </ul> */}
                        </div>
                        <div>
                            Skills & Requirements :
                            {/* <ul className="skills-list">
                                {data.benefits.map(function(item,i){
                                    return <li key={i} >{i+1}.{item}</li>
                                })}
                            </ul> */}
                        </div>
                        <div>
                            City :
                            <ul className="city-list">
                                {/* {
                                    data.city.map(function(item,i){
                                        if (i !== (that.props.data.city.length)-1)
                                            return <li key={i} >{item},</li>
                                        else
                                            return <li key={i} >{item}</li>

                                    })
                                } */}
                            </ul>
                        </div>
                        <div className="action-btns" >
                            <button type="button" className="btn btn-default" id="approve-btn" >Approve</button>
                            <button type="button" className="btn btn-default" id="support-btn" >Support</button>
                        </div>
                </Collapse>
                <div id="myModal" className="modal fade" role="dialog">
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <button type="button" className="close" data-dismiss="modal">&times;</button>
                                <h4 className="modal-title">Modal Header</h4>
                            </div>
                            <div className="modal-body">
                            </div>
                            <div className="modal-footer">
                                <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Support

我猜在render方法中有不止一个（主要）组件。根据文档，它应该是呈现方法中的一个主要组件或html标记

class Executioner extends React.Component {
  render() {
    return React.Children.only(this.props.children)()
  }
}

这将返回This.props.children中的唯一子级。如果有多个孩子，它会抛出一个错误，从而使整个应用程序完全停止，以避免懒惰的开发人员试图弄乱我们的组件

请参阅此处的更多信息：

已更新

经过一段时间的调查，我发现问题出在哪里。
组件应该有一个主html节点。您应该将
的内容包装在例如
中，如下所示：

<Collapse isOpened={this.state.isOpened} className="hidden-brand-info" >
                <div>
                    <div>Title : {data.position_name}</div>
                        <div>Description : {data.description}</div>
                        <div>Positions : {data.postions}</div>
                        <div>Intenship Period : {data.period} </div>
                        <div>

                        </div>
                        <div>

                        </div>
                        <div>
                            City :
                            <ul className="city-list">

                            </ul>
                        </div>
                        <div className="action-btns" >
                            <button type="button" className="btn btn-default" id="approve-btn" >Approve</button>
                            <button type="button" className="btn btn-default" id="support-btn" >Support</button>
                        </div>
                        </div>
                </Collapse>


标题：{data.position_name}
描述：{data.Description}
职位：{data.Positions}
管理期：{data.Period}
城市：


批准
支持

而且它看起来像是
没有
isOpened
属性和
className
。
您还没有声明一个方法
reviewAction
，您尝试在这一行代码中使用该方法：
查看
您的错误与渲染组件有关。请也添加渲染代码。请添加完整错误，并添加
数据的日志结果
您应该使用胖箭头函数进行成功回调，以使
此
绑定到组件。你不应该做
constthat=this@bennygenel。据此编辑。请帮忙。谢谢什么是折叠组件？是从图书馆来的吗？另外，你在代码末尾还有一个额外的
{
。这是问题的输入错误吗？你仍然没有添加数据。现在我把我的整个
支持
组件放在上面。你在谈论什么数据？你现在能提供一个基于编辑的解决方案吗？我已经提供了完整的代码。我无法测试它得到401（未经授权）bundle.js？ba50e4811e0a946d1160:47086{msg:“提供了格式错误的令牌”，代码：4300，状态：401}。能否从var data=JSON.parse（body）粘贴“data”的值？您没有粘贴所有代码，并且缺少了一些位，但我认为问题不在您所指的那一行。您是否尝试删除了render方法之外的所有内容？只是为了确保没有其他原因导致错误。嘿，我复制粘贴了我的整个页面
support.jsx
文件。还添加了数据变量que斯蒂恩，让我知道你还需要什么信息。谢谢！是的，知道了。不管怎样，拉特尔发现了，我一开始不想崩溃。现在一切都解决了！谢谢！
<Collapse isOpened={this.state.isOpened} className="hidden-brand-info" >
                <div>
                    <div>Title : {data.position_name}</div>
                        <div>Description : {data.description}</div>
                        <div>Positions : {data.postions}</div>
                        <div>Intenship Period : {data.period} </div>
                        <div>

                        </div>
                        <div>

                        </div>
                        <div>
                            City :
                            <ul className="city-list">

                            </ul>
                        </div>
                        <div className="action-btns" >
                            <button type="button" className="btn btn-default" id="approve-btn" >Approve</button>
                            <button type="button" className="btn btn-default" id="support-btn" >Support</button>
                        </div>
                        </div>
                </Collapse>