Question

这是关于我刚刚在这里提出的一个问题：React expose component function

因此，当在公开函数的2个组件上使用componentDidMount时，看起来数据函数的componentDidMount需要一些时间来加载，然后这会导致返回一个空数组。我很反应，所以我不确定这是否是使用它们的正确方法。

class Data extends React.Component {
    constructor() {
        super();
        this.state = {
            names: []
        }
    }
    componentDidMount() {
        $.get('data.json', function (result) {
            this.setState({
                names: result.names
            });
        }.bind(this));
    }

    getNames(){
        return this.state.names;
    }

    render(){
        return (<div></div>);
    }

}


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

    }

    componentDidMount() {
        this.state.test = this.refs.hello.getNames();
        console.log(this.refs.hello.getNames());
    }

    something(){
        console.log(this.state.test);
    }


    render(){
        return(
            <div>
                <Data ref='hello' />
                {this.something()}
            </div>
        )
    }
}

const app = document.getElementById('app');

ReactDOM.render(<Layout />,  app);

Answer 1

您在布局组件中为状态分配值时遇到了错误，例如this.state.test = this.refs.hello.getNames();，您应该使用setState（）;最好还是检索Layout组件中的数据，如果你想使用Data组件中的数据，那么你可以将它作为道具传递到同样的

class Data extends React.Component {
    constructor() {
        super();
    }
    render(){
        console.log(this.props.names)
        return (<div></div>);
    }

}


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

    }

    componentDidMount() {
        $.get('data.json', function (result) {
            this.setState({
                test: result.names
            });
        }.bind(this));

    }

    something(){
        console.log(this.state.test);
    }


    render(){
        return(
            <div>
                <Data ref='hello' names={this.state.test}/>
                {this.something()}
            </div>
        )
    }
}

const app = document.getElementById('app');

ReactDOM.render(<Layout />,  app);

Answer 2

这里的问题是你要在componentDidMount中获取，你应该在componentWillMount中获取，这样就可以在呈现组件之前获得数据

根据文档：

在安装发生之前立即调用
componentWillMount()。它在render()之前调用，（因此在此方法中设置state不会触发重新渲染。避免在此方法中引入任何副作用或订阅。）

您需要做的就是将componentDidMount更改为componentWillMount

https://facebook.github.io/react/docs/react-component.html#componentwillmount

React公开组件功能并使用ComponentDidMount获取数据

2 个答案: