Reactjs React.js将结果绑定为从web api获取的卡片

嗨，当我在React js中将数据用作常量时，我有一个工作示例。当数据从控制器返回时，我需要相同的输出，有人可以帮助我。这是预期的结果

我的带有控制器调用的代码，在render中，我希望呈现示例中的结果

class UserList extends React.Component {
    constructor() {
        super();
        this.state = { person: [] };
    }

componentDidMount() {
    this.UserList();
}

UserList() {
    fetch("/ReactJS/GetMessage")
        .then(res => res.json())
        .then(
        (result) => {
            alert(result);
            this.setState({
                //isLoaded: true,
                person: result

            });
        }
        )
}

render() {
    // need to bind the html result as per in the fiddle
}
}
ReactDOM.render(<UserList />, document.getElementById('form'));

类用户列表扩展了React.Component{
构造函数（）{
超级（）；
this.state={person:[]}；
}
componentDidMount（）{
这个.UserList（）；
}
用户列表（）{
获取（“/ReactJS/GetMessage”）
.then（res=>res.json（））
.那么(
（结果）=>{
警报（结果）；
这是我的国家({
//isLoaded：是的，
个人：结果
});
}
)
}
render（）{
//需要根据fiddle中的绑定html结果
}
}
ReactDOM.render（，document.getElementById（'form'））；

render（）{
{this.state.person.length>0
? 
:
无效的
}
}

---

经过大量的研究，我终于自己做了

class Application extends React.Component {
    constructor() {
        super();
        this.state = {
            camperArr: []
        };
    }

    componentDidMount() {
        this.callApi("/ReactJS/GetMessage");
    }

    callApi(str) {
        var req = str;
        this.serverRequest = $.get(req, function (result) {
            result.map(function (elem, idx) {
                elem["id"] = idx + 1;
            });
            this.setState({
                camperArr: result
            });
        }.bind(this));
    }

    render() {
        return (
            <CardList list={this.state.camperArr} />
        );
    }
}

// the list of campers
class CardList extends React.Component {
    render() {
        var list = this.props.list;
        return (
            <div>
                {list.map((card, index) => <Card key={index} {...card} />)}
            </div>
        );
    }
}
class Card extends React.Component {
    render() {
        return (
            <div style={{ margin: 'lem' }}>
                <img width="75" src={this.props.UserImage} />
                <div style={{ display: 'inline-block', marginLeft: 10 }}>
                    <div style={{ fontSize: '1.25em', fontWeight: 'bold' }} >{this.props.UserName}</div>
                    <div>{this.props.Company}</div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(<Application />, document.getElementById('form'));

类应用程序扩展React.Component{
构造函数（）{
超级（）；
此.state={
坎佩拉尔：[]
};
}
componentDidMount（）{
this.callApi（“/ReactJS/GetMessage”）；
}
callApi（str）{
var-req=str；
this.serverRequest=$.get（请求，函数（结果）{
结果映射（函数（elem，idx）{
元素[“id”]=idx+1；
});
这是我的国家({
坎佩拉尔：结果
});
}.约束（这个）；
}
render（）{
返回(
);
}
}
//露营者名单
类CardList扩展了React.Component{
render（）{
var list=this.props.list；
返回(
{list.map（（卡片，索引）=>）}
);
}
}
类卡扩展了React.Component{
render（）{
返回(
{this.props.UserName}
{this.props.Company}
);
}
}
ReactDOM.render（，document.getElementById（'form'））；

这是回答还是评论？我现在不担心警告，我需要的是预期的输出，但是我如何在我的渲染中应用它，我使用的是

UserList

这会与我从你的代码笔中编写的上述代码一起工作吗，它现在似乎对你有效？这就是您所需要的吗？我的问题是codepen中的代码工作正常，但我希望通过粘贴在此处的代码实现相同的效果

render（）{//需要根据在fiddle中绑定html结果}

这里我需要的是逻辑什么是问题，你面对的是什么？什么都没有我只想绑定从MVC控制器返回的结果，就像我们在小提琴中显示一样