Question

我正在尝试从应用程序启动调用一个函数。该函数通过dataVar（在别处设置）从JSON读取数据，并尝试将其加载到{items}中以供进一步消费：

const dataVar = JSONStuff;    
class Global extends Component {
        constructor(props) {
        super(props);
        this.state = {
            query: '',
            items: []
        }

        this.init();

    } 

    // componentDidMount() {
    // This doesn't work either!
    //  this.init();
    // }

    init() {
        let { items } = dataVar;
        this.setState({items});
    }


    render() {
        return (
            <div className="Global">
                    <Gallery items={this.state.items}/>
            </div>
        )
    }
}

然后在Gallery.js中：

import React, { Component } from 'react';

class Gallery extends Component {
    render() {
        return (
            <div>
                <h3>gallery:</h3>
                {
                    this.props.items.map((item, index) => {
                        let {title} = item.name;
                        return (
                            <div key={index}>{title}</div>
                        )
                    })
                }
            </div>
        )
    }
}

导出默认图库;

不确定为什么Global无法在其内部调用函数。我试过有没有“这个”。我要么得到错误，应用程序将无法编译或我得到：

"Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op."

Answer 1

首先，这是一个警告，您最好不要在setState中致电componentDidMount。

我的建议1：在构造函数中为状态赋值

constructor(props) {
  super(props);

  this.state = {
    query: '',
    items: dataVar.items,
  };
}

建议2：

在componentWillReceiveProps

内部

componentWillReceiveProps(nextProps) {
  const { dataVar: items } = nextProps; // pass dataVar as props
  this.setState({
    items,
  });
}

希望以上有所帮助。

另外尝试调试道具并注意控制台上的错误

在应用程序启动时调用函数

1 个答案: