從反應功能組件返回變量

Question

我有一個反應組件：

class ModulesListing extends React.Component {
  render(){
    const module = this.props.module;
    getModuleCode(module){
       var moduleCode = 0;
       // Do relevant calls and get moduleCode
       return moduleCode;
    }
    return (
      //Info to display
    );
  }
}

在這里，我需要在return（）中獲取moduleCode的值，並將其分配給變量以進行進一步處理。 當我被分配為，

var moduleCode = this.getModuleCode(module);

它返回一個未定義的對象。 從函數返回值的正確方法是什么？

Answer 1

您可以在componentDidMount獲取代碼並將其存儲在狀態中。

例

 function doCall() { return new Promise(resolve => setTimeout(() => resolve("code"), 1000)); } class ModulesListing extends React.Component { state = { code: null }; componentDidMount() { this.getModuleCode(); } getModuleCode = module => { doCall(this.props.module).then(code => { this.setState({ code }); }); }; render() { const { code } = this.state; if (code === null) { return null; } return <div> {code} </div>; } } ReactDOM.render(<ModulesListing />, document.getElementById("root")); 

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

Answer 2

嘗試在ComponentDidMount()調用函數

componentDidMount(){
  this.getModuleCode(this.props.module);
}

並將moduleCode置於狀態，以便在調用didmount后可以接收它。

喜歡

  getModuleCode(module){
     var moduleCode = 0;
     // Do relevant calls and get moduleCode
     this.setState({moduleCode});
  }

在render中接收它 - this.state.moduleCode

Answer 3

您可以在getModuleCode函數中定義狀態並設置狀態，並在任何地方使用它。

class ModulesListing extends React.Component {

    componentDidMount(){
        this.getModuleCode(this.props.module);
    }

    render(){
       const module = this.props.module;
       getModuleCode = (module) => {
          var moduleCode = 0;
          // Do relevant calls and get moduleCode
          this.setState({moduleCode})
       }
       return (
            const {moduleCode} = this.state;
            //Info to display
        );
     }
}

Answer 4

getModuleCode必須駐留在render函數之外，並通過bind或arrow函數綁定到“this”上下文

 class ModulesListing extends React.Component { getModuleCode = (module) => { const moduleCode = 0; // Do relevant calls and get moduleCode return moduleCode; } render(){ // render } } 

Answer 5

如果要使用var moduleCode = this.getModuleCode(module); 在渲染函數中，您必須將getModuleCode(module)定義為組件類中的方法，而不是渲染函數中的方法。

class ModulesListing extends React.Component {
  getModuleCode(module){
       var moduleCode = 0;
       // Do relevant calls and get moduleCode
       return moduleCode;
    }
  render(){
    const module = this.props.module;
    var moduleCode = this.getModuleCode(module);
    return (
      //Info to display
    );
  }
}

希望有所幫助。