Это хороший шаблон для использования! запись для прослушивания изменений ReactJS?

Question

Я использую ReactJS + Redux в своих проектах уже пару лет. Я часто оказываюсь в асинхронных ситуациях, когда мне нужно, чтобы мой компонент ожидал обновления состояния для визуализации. Обычно достаточно простой логики !this.props.isFetching ? <Component /> : "Loading...".

Однако есть случаи, когда мне нужно проверить состояние массива, встроенного в объект состояния. В этих случаях большинство моих компонентов выглядят так:

  renderPostAuthor = () => {
    if (!!this.props.postDetails.author) {
      return this.props.postDetails.author[0].name;
    } else {
      return (
        <div>
          <StyledTitle variant="subheading" gutterBottom color="primary">
            Loading...
          </StyledTitle>
        </div>
      );
    }
  };

Является ли использование нотации !! хорошим образцом / практикой в ​​ReactJS?

ОБНОВЛЕНИЕ: Спасибо за ответы, и все они действительны. Возможно, чтобы прояснить мой вопрос далее, обратите внимание, что this.props.postDetails - это само состояние, которое содержит ряд объектов и массивов. Поэтому проблема в том, что если я опускаю !!, а this.props.postDetails еще не создан, и, следовательно, не содержит массивов, таких как author[], я получаю ошибку undefined.

Answer 1

Существуют моменты реакции, когда использование !! особенно полезно, но это не тот случай, как указано выше. Наиболее распространенный случай, который я обнаружил, - при оценке того, собираетесь ли вы отображать элементы массива или нет. Часто люди используют длину массива, чтобы решить, работать с ним или нет, так как 0 length является логическим значением Фолси:

render () {
  return this.props.array.length && <MyList items={this.props.array} />
}

К сожалению, это вернет 0, который будет отображаться на странице. Поскольку false не будет отображаться на странице, хорошей альтернативой будет использование двойного взрыва, чтобы возвращалось false.

render () {
  return !!this.props.array.length && <MyList items={this.props.array} />
}

Answer 2

Это имеет гораздо большее отношение только к JavaScript, чем к React.

Нет, использование !! не особенно полезно. Это:

if (!!this.props.postDetails.author) {

такой же, как этот:

if (this.props.postDetails.author) {

Ни один из них не означает, что author содержит массив хотя бы с одной записью, на которую опирается ваша следующая строка кода. Чтобы сделать это, добавьте .length или, в вашем конкретном примере, возможно [0] (в случае, если author имела запись, но эта запись была ошибочной):

if (this.props.postDetails.author[0]) {

Если author может быть null или undefined, нам нужно сделать две проверки:

if (this.props.postDetails.author && this.props.postDetails.author[0]) {

Поскольку мы собираемся использовать результат, может быть лучше сохранить результат в переменной или константе:

const firstAuthor = this.props.postDetails.author && this.props.postDetails.author[0];
if (firstAuthor) {
    return firstAuthor.name;
}

---

Пример текущего кода, выдавшего ошибку:

console.log("Running");
const author = [];
if (!!author) {
  console.log(author[0].name);
} else {
  console.log("No Author");
}

Пример проверки [0], когда мы знаем, что author не будет null / falsy:

console.log("Running");
const author = [];
if (author[0]) {
  console.log(author[0].name);
} else {
  console.log("No Author");
}

Пример двойной проверки, когда author может быть null / falsy:

console.log("Running");
const author = null;
if (author && author[0]) {
  console.log(author[0].name);
} else {
  console.log("No Author");
}

Пример сохранения и использования результата:

function example(author) {
  const firstAuthor = author && author[0];
  if (firstAuthor) {
      return firstAuthor.name;
  } else {
      return "Loading...";
  }
}
console.log(example(null));                      // Loading...
console.log(example([]));                        // Loading...
console.log(example([{name:"Harlan Ellison"}])); // "Harlan Ellison" (RIP)