Вызов реквизита из контейнера - PullRequest
Новая
       4

Вызов реквизита из контейнера

0 голосов
/ 22 января 2020

Я немного запутался в идее использования реквизита в контексте, который я использую для своего приложения React. В моем компоненте мне нужно проверить, соответствует ли значение определенного пропеллера (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;

Ничего не возвращается, когда я запускаю приложение, и я полагаю, что это потому, что я неправильно вызываю опору в своем компоненте, но я не уверен относительно того, как go исправить его. Я довольно новичок в работе с реквизитом, поэтому все еще пытаюсь разобраться в этом.

Ответы [ 2 ]

1 голос
/ 22 января 2020

Я предполагаю, что вы где-то получаете ошибку из-за того, что this не имеет props и this.props.companyInfoList.companyCode, пытающихся получить доступ к свойству не объекта. this.props.companyInfoList изначально установлен на null, поэтому доступ к свойству для него будет нарушен.

Несколько стратегий для решения проблемы:

  1. По умолчанию это пустой объект 
this.state = { 
  companyInfoList: {}, 
}
Блокировать рендеринг компонента, пока он не будет иметь значение: 
if (this.state.companyInfoList) {
  return (
    <CompanyContact companyInfoList={this.state.companyInfoList} />
  );
} else {
  return null;
}
Убедитесь, что реквизит является объектом и имеет ключ companyCode: 
if (this.props.companyInfoList && 
  this.props.companyInfoList.companyCode && 
  this.props.companyInfoList.companyCode === '1234') {

Кроме того, this будет в неправильном контексте, и вышеописанные изменения будут наиболее скорее всего, не будет достаточно. Попробуйте перейти к функции со стрелкой, как это: 

help = () => {
  // your code here
}
0 голосов
/ 22 января 2020

Я бы лично реорганизовал этот компонент logi c и напрямую использовал бы значение prop в методе рендеринга, например: 

class CompanyContact extends React.Component {
  render() {
    const { companyInfoList } = this.props;

    return companyInfoList && companyInfoList.companyCode === '1234' ? (
      <p>something</p>
    ) : (
      <p>somethingelse</p>
    )
  }
}

export default CompanyContact;
...