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()中调用函数

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

并将moduleCode置于状态，以便您在调用didmount之后收到它。

喜欢

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

在渲染中接收它-this.state.moduleCode

Answer 2

您可以在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 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必须驻留在渲染函数外部，并通过 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
    );
  }
}

希望有帮助。

从react功能组件返回变量

5 个答案: