Question

它是我调用子组件（DeviceReplacementRequestsList.js）的主类。并且子组件的 componentDidMount 不起作用。我不知道为什么会这样。我看到了其他一些答案，但我认为这与我的案例无关。

主组件.js

class DevicesTypes extends React.Component {
        module_name = "Device Types";
        create_function = "create_device_type";
        get_function = "get_device_type";
    
        render() {
            return (
                <WidgetGrid>
                    {
                        this.props.modules && this.props.modules[this.module_name] && this.props.modules[this.module_name].members && this.props.modules[this.module_name].members.find((x) => { return x.id == this.create_function }) ?
                            <article className="col-sm-5">
                                <NewDeviceType />
                            </article> : null
                    }
                    {
                        this.props.modules && this.props.modules[this.module_name] && this.props.modules[this.module_name].members && this.props.modules[this.module_name].members.find((x) => { return x.id == this.get_function }) ?
                            <article className="col-sm-7">
                                <DeviceTypeList permissions={this.props.modules && this.props.modules[this.module_name] && this.props.modules[this.module_name].members ? this.props.modules[this.module_name].members : []} />
                            </article> : null}
                    {
                        this.props.modules && this.props.modules[this.module_name]  ?
                            <article className="col-sm-7">
                                <Text2Speech/>
                            </article> : null
                    }
                    {
                        this.props.modules && this.props.modules[this.module_name]  ?
                            <article className="col-sm-5">
                                <NewDeviceReplacement/>
                            </article>: null
                    }
                    {
                        this.props.modules && this.props.modules[this.module_name]  ?
                            <article className="col-sm-7">
                                <DeviceReplacementRequestsList/>
                            </article> : null
                    }
    
                </WidgetGrid>
            )
        }
    }

在最后一个组件 DeviceReplacementRequestsList.js 中，我的 componentDidMount 没有触发

DeviceReplacementRequestsList.js

    export default class DeviceReplacementList extends React.Component {
      constructor() {
        super();
        this.state = {
          deviceData : [],
          spinner : true
        }
      }
    
      componentDidMount() {
        console.log("hello")
        this.getDeviceReplacementRequests();
      }
    
    
      getDeviceReplacementRequests() {
        const queryPrams = "";
        ds.getDeviceReplacementRequests(queryPrams,data => {
          console.log(data);
          this.setState({
            deviceData : data
          })   
        }, err => {
    
        })
      }
      
      handleChanges(e) {
        this.setState({
          [e.target.name]: e.target.value
        })
      }
    
     
      render() {
        return (
          <div>
          <JarvisWidget editbutton={false} deletebutton={false} color="blueDark">
            <header>
              <span className="widget-icon"> <i className="fa fa-edit" /></span>
              <h2>All Device Types</h2>
    
              <button className="btn btn-trans float-right" type="button" onClick={this}>
                <i className="fa fa-refresh"></i>
              </button>
    
              <div className="col-md-12">
                <div className="loader"></div>
              </div>
           </header>
      </JarvisWidget>
    </div>
)}

Answer 1

你有没有试过先在构造函数中绑定它？

this.getDeviceReplacementRequests = this.getDeviceReplacementRequests.bind(this);

在我的情况下，ComponentDidMount 没有触发

1 个答案: