javascript - 为什么 React 在 setState 之后没有渲染我的结果？

Question

具有以下 jsx 代码:

import React, { Component } from 'react';
import RemoteAssets from '../modules/RemoteAssets';



class RemoteOptions extends Component {
    constructor(props) {
        super(props);
        this.state = {
            RemoteOptions: []
        }
    }


    componentDidMount() {
        const { api, locale } = this.props;
        RemoteAssets.loadRemoteOptions({ api, locale }).then((RemoteOptions) => {
            console.log( 'RemoteOptions', RemoteOptions);
            this.setState((state, props) => ({
                RemoteOptions
            }), () => {
                this.render()
            });
        })

    }

    render() {

        return (
            <div className="row">
                <div className="col-4">
                    <label >Opt: </label>
                </div>
                <div className=" col-8">
                    {JSON.stringify(this.state.RemoteOptions)}
                </div>
            </div>
        );
    }
}

export default RemoteOptions;

这就是我身上发生的事情:

componentDidMount 正确记录预期的负载。

 console.log( 'RemoteOptions', RemoteOptions);

所以我相信它也会按预期设置 State:

            this.setState((state, props) => ({
                RemoteOptions
            }), () => {
                this.render()
            });

我还在上面添加了 this.render() stmt，以确保更新状态后组件将重新渲染。

但是:

   {JSON.stringify(this.state.RemoteOptions)}

在 componentDidMount 发生之前始终返回“[]”作为初始状态并更新状态。

我应该如何安排这个组件以使我的渲染更新与异步加载的payòoad？

Answer 1

名称冲突

您的状态名称和类名称有冲突。

class RemoteOptions extends Component { // class name
    constructor(props) {
        super(props);
        this.state = {
            RemoteOptions: []           // state name
        }
    }
    ...

给你的州起个不同的名字。