从容器呼唤道具

Question

我对在我的React应用程序中使用的上下文中使用prop的想法有些困惑。在我的组件中，我需要检查某个属性（props.companyCode）的值是否与某个字符串匹配，然后才打印出我需要的<p>。以下是我在组件中调用道具的条件：

Components/CompanyContact.jsx

class CompanyContact extends React.Component {
  help() {
    if (this.props.companyInfoList.companyCode === '1234') {
      return <p>something</p>;
    }
    return <p>somethingelse</p>;
  }

  render() {
    const help = this.help();
    return (
            <div>
               {help};
            </div>
)}}

export default CompanyContact;

这就是我要存放的容器：

Container/InfoContainer.jsx

class InfoContainer extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        companyInfoList: null,
      };
    }

    async componentWillMount() {
      const companyInfoCachedData = CachingService.getData('companyInfoList');
      if (companyInfoCachedData) {
        this.setState({ companyInfoList: companyInfoCachedData });
        return;
      }
    }

    async getCompanyInfo(accessToken) {
      try {
        const companyProfileResponse = await requestAWSGet('api/company-profile', undefined, accessToken);
        CachingService.setData('companyInfoList', companyProfileResponse);
        this.setState({ companyInfoList: companyProfileResponse });
      } catch (err) {
        throw err;
      }
    }

    render() {
      return (
          <CompanyContact companyInfoList={this.state.companyInfoList} />
      );
    }
}

export default InfoContainer;

我运行应用程序时没有返回任何结果，我相信这是因为我没有在组件中正确调用prop，但是不确定如何修复它。我对使用道具还很陌生，因此仍在尝试获取指导。

Answer 1

我假设您由于this.props.companyInfoList.companyCode而在某处出现错误。 this.props.companyInfoList最初设置为null，因此访问该属性将会中断。

Answer 2

我将亲自重构该组件逻辑，并直接在render方法中使用prop值，例如：