时间戳

首页 > 解决方案 > 从渲染中的反应函数返回的访问变量（在循环中）

javascript - 从渲染中的反应函数返回的访问变量（在循环中）

问题描述

我有一个反应类组件，我在其中传递模块名称和其他一些属性的列表。我试图通过调用函数 getModuleCode() 并将模块名称作为参数传递来获取模块代码。

class ModulesListing extends React.Component {
  getModuleCode(module){
       var moduleCode = 0;
       // Do relevant calls and get moduleCode
       return moduleCode;
    }
  render(){
    var {modulesList} = this.props;
    modulesList.forEach(module => {
        //here I need to call getModuleCode as getModuleCode(module.name)
       var moduleCode = getModuleCode(module.name)
       console.log(moduleCode)
    })

    return (
      //Info to display
    );
  }
}

如果我如上所述尝试，它会打印为未定义 也尝试设置为状态，这不适合循环。在这里，我想要的是获取某个模块的模块代码。

标签： javascriptreactjsfunctionclass

解决方案

如果更改，您可以获取代码，componentDidMount并将它们存储在状态中。componentDidUpdatemodulesList

例子

function doCall() {
  return new Promise(resolve =>
    setTimeout(() => resolve(Math.random().toString()), 1000)
  );
}

class ModulesListing extends React.Component {
  state = { codes: [] };

  componentDidMount() {
    this.getModuleCodes();
  }

  componentDidUpdate(prevProps) {
    if (this.props.modulesList !== prevProps.modulesList) {
      this.setState({ codes: [] }, this.getModuleCodes);
    }
  }

  getModuleCodes = () => {
    Promise.all(this.props.modulesList.map(doCall)).then(codes => {
      this.setState({ codes });
    });
  };

  render() {
    const { modulesList } = this.props;
    const { codes } = this.state;

    if (codes.length === 0) {
      return null;
    }

    return (
      <div>
        {modulesList.map((module, index) => (
          <div>
            {module}: {codes[index]}
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(
  <ModulesListing modulesList={["a", "b", "c"]} />,
  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>

推荐阅读