Question

我正在与request.get进行api通话。当我在request.get回调函数内设置状态时，我收到此错误

我的错误： -

  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

我的数据变量： -

data =
{
  "brand":"59b52b3690c28428d945b8f2",
  "brandmanager":"59b3f204cbc3c72510c8acfd",
  "moderation":true,
  "createdAt":"2017-09-14T06:21:21.893Z",
  "updatedAt":"2017-09-14T06:21:21.893Z",
  "id":"59ba1fe190c28428d945b8f4"
}

Answer 1

我猜你在渲染方法中有多个（主要）组件。根据文档，它应该只是render方法中的一个主要Component或html标记。

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

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

在此处查看更多内容：http://mxstbr.blog/2017/02/react-children-deepdive/

<强>已更新

经过一段时间的调查，我发现是什么问题。 <Collapse>组件应该有一个主html节点。您应该将<Collapse>的内容包含在内容中。 <div>喜欢这样：

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

此外，<Collapse>似乎没有isOpened道具和className。您还错过了在此代码行中尝试使用的一个方法reviewAction： <button type="button" className="btn btn-default" id="review-btn" onClick={this.reviewAction} >Review</button>

React Js：React.Children.only希望收到一个React元素子元素

1 个答案: