为什么React在setState之后不呈现我的结果？

Question

Having the below jsx code:

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;

This is what happens to me:

componentDidMount logs correctly the payload expected.

 console.log( 'RemoteOptions', RemoteOptions);

So I believe that It will also set State as expected:

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

I also added above a this.render() stmt to be sure the component will be re-rendered after updating the state.

But :

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

Will always return "[]" as the init state before componentDidMount happens and update the state.

How should I arrange this component to have my render update the with the payòoad loaded async?

Answer 1

Name conflict

Your state name and class name are in conflict.

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

Call your state something different.

Answer 2

Why not simply using setState the way documentation suggests?

this.setState({ RemoteOptions });

Render method will be automatically called right after the state is set.

Answer 3

I implemented the skeleton of the problem, and everything works as expected.

 const loadRemoteOptions = () => new Promise(resolve => { setTimeout(() => resolve('myRemoteOptions'), 1000) }) class App extends React.Component { state = { remoteOptions: null } componentDidMount(){ loadRemoteOptions().then(remoteOptions => this.setState({ remoteOptions })) } render(){ return this.state.remoteOptions || 'Loading...'; } } ReactDOM.render(<App />, document.getElementById('root')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>