名称冲突

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

给你的州打电话一些不同的东西。

Answer 2

为什么不像文档建议的那样简单地使用setState？

this.setState({ RemoteOptions });

设置状态后，将自动调用渲染方法。

Answer 3

我实现了问题的框架，一切都按预期进行。

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>

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

3 个答案:

名称冲突