javascript - 从 react 功能组件返回变量

Question

我有一个 react 组件:

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);

它返回一个 undefined object 。从函数返回值的正确方法是什么？

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>