Блог

У меня есть провайдер, который отправляет данные через реквизиты. Он отправляет около 4-5 нулевых значений, прежде чем реквизиты будут содержать нужные мне данные (адрес электронной почты «mailto»). Поскольку нулевые данные появляются ПЕРЕД почтовым адресом, реквизит непригоден для использования, поскольку в нем не будет нужных мне данных. Итак, каким-то образом мне нужно структурировать свой код для обновления, когда я получаю почтовый адрес или fitler из нулевых значений. Реквизит представляет собой строковое значение.

В настоящее время я пытался:

 constructor() {
  this.state = {
    url: "",
    loading: false
  };
}

public componentDidMount(): void {
  let urls = "";
  if (this.props.url != null amp;amp; undefined)
    if (this.props.url.length > 0) {
      urls = this.props.url;
    }

  this.setState({
    url: this.state.url   urls
  });
  console.log(this.state.url);
}

public render(): React.ReactElement<ImyProps> {
  var iconStyle = {
    fontSize: ``,
    display: "inline-block",
    color: " #ff0033"
  };

  const { loading, url } = this.state;

  return (
    <div>
      {console.log(this.state.url)}

      <Icon
        style={iconStyle}
        iconName="Lightbulb"
        className="ms-IconExample"
      />

      {this.state.loading amp;amp; this.state.url amp;amp; (
        <a href={this.props.url}>
          <p>Test. {this.props.url}</p>
        </a>
      )}
    </div>
  );
}
  

Здесь у меня есть хук componedDitMount (пробовал и без этого), где я пытаюсь отфильтровать нулевые значения, это не работает. Похоже, что реквизиты со значением появляются позже в жизненном цикле. Не могу выполнять функции массива для реквизита, а также для его отдельной строки.

Во-первых, вы сказали, что «Он отправляет около 4-5 нулевых значений, прежде чем реквизит будет содержать нужные мне данные»: это означает, что у вашего компонента не будет реквизита, который вам нужен, при первом рендеринге.
Почему это важно? Потому что вы использовали componentDidMount() , который вызывается только при первом монтировании компонента; в вашем случае, из-за того, что вы сказали, componentDidMount() будет запущен, когда this.props.url равно null .

Сказал, что, как сказали некоторые пользователи в комментарии, IF утверждение также неверно.

В любом случае, вы должны написать что-то вроде этого:

 componentDidUpdate() {
    if (this.props.url) {
        // Here you have this.props.url with some value    
    }
}
  

Обратите внимание, что на самом деле вам не нужно внедрять componentDidMount если вы на 100% уверены, что при первом рендеринге компонента его реквизиты не содержат необходимых вам данных.

Я не написал код внутри IF инструкции, потому что я не уверен, должен ли this.props.url быть массив строк, или это должна быть просто строка.