Question

在学习反应的过程中，我似乎遇到了一个问题。我调用Api，它返回一个复杂的对象，并尝试根据该数据渲染我的屏幕。

export default class MyClass extends React.Component {

    constructor(props) {
        super(props);
        console.log("Constructor of MyComponent..");

        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.isLoading = true;
        this.state = {data: {}}
    }

    componentDidMount() {
        const request = {
            method: 'GET',
            URL: `${Server.ApiURL}/api/data`
        };
        console.log('Calling fetch....');

        fetchData(request)
        .then((data) => {
            this.isLoading = false;
            console.log("Data recieved!", data);
             this.setState(
                         { data: data });
        });
    }

然后我尝试渲染我的碎片：

 render() {
        {if (this.isLoading) return (<div>Loading...</div>)}
        return (
            <div className="row" style={containerStyle}>
                <div className="col-sm-4">
                     <EditBox  required={true}  label="Email Address" value={this.state.email}     onChange={this.handleEmailChange} />
                     <Dropdown required={true}  label="Client Type" value={this.state.clientTypeId}   onChange={this.handleClientTypeChange} data={this.state.clientTypes}/>
...

EditBox是一个呈现编辑框的容器，而DropDwon是一个组件，它通过“数据”来执行Array.map。丙

然而，当我打电话给setstate时，我得到了：

警告：无法在已卸载的情况下调用setState（或forceUpdate）零件。这是一个无操作，但它表示你的内存泄漏应用

这可能只是一个警告，但是...我应该如何获取数据并加载它？

另外，我的数据是＆＃39;没有人填充json，我可以稍后再参考？例如，我的回复：

{id：1，name：＆＃34; Name Testing＆＃34;，clientTypes：[{id：1，displayName：＆＃34; Test＆＃34;}] ...}

我可以参考：

this.state.name

何时从API和渲染屏幕加载数据

0 个答案: