Это хороший шаблон для использования !! нотация для прослушивания изменений ReactJS?
Я использую 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.
Не знаю, как лучше всего использовать реакцию, но это сделано только для того, чтобы сделать переменную типа boolean.
В !! нет ничего плохого, но в этом случае if (this.props.postDetails.author) будет иметь такой же эффект. Это скорее вопрос вкуса, если вам явно не нужен boolean.
@Pointy не то же самое, смотри. var a = 1; var x = !!a; console.info(x) // true (not 1)
@lealceldeiro, конечно, но опубликованный код использует !! в тесте if.
Пожалуйста, проверьте обновление, которое я сделал по этому вопросу. Иногда мне все еще нужно проверить, обработан ли this.props.postDetails, прежде чем я смогу даже протестировать массив this.props.postDetails.author.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info("Running");
const author = [];
if (!!author) {
console.info(author[0].name);
} else {
console.info("No Author");
}Пример проверки [0], когда мы знаем, что author не будет null / ложным:
console.info("Running");
const author = [];
if (author[0]) {
console.info(author[0].name);
} else {
console.info("No Author");
}Пример двойной проверки, когда author может быть null / ложным:
console.info("Running");
const author = null;
if (author && author[0]) {
console.info(author[0].name);
} else {
console.info("No Author");
}Пример сохранения и использования результата:
function example(author) {
const firstAuthor = author && author[0];
if (firstAuthor) {
return firstAuthor.name;
} else {
return "Loading...";
}
}
console.info(example(null)); // Loading...
console.info(example([])); // Loading...
console.info(example([{name:"Harlan Ellison"}])); // "Harlan Ellison" (RIP)Проблема в том, что если я опущу !!, а this.props.postDetails еще не создан и, следовательно, не содержит массивов, таких как author[], я получаю ошибку undefined.
@JamesJ. - У вас тоже была бы проблема с участием с !!. Если this.props.postDetails может еще не существовать, вам понадобится дополнительная защита: if (this.props.postDetails && this.props.postDetails.author && this.props.postDetails.author[0]) {. Если вы можете предположить, что .author будет существовать, если .postDetails существует, вы можете опустить средний. Также могут помочь ответы на это и это.
Бывают моменты, когда использование !! особенно полезно, но это не тот случай, о котором говорилось выше. Самый распространенный случай, который я обнаружил, - это оценка того, собираетесь ли вы отображать элементы массива или нет. Часто люди будут использовать длину массива, чтобы решить, работать с ним или нет, поскольку длина 0 является ложным логическим значением:
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} />
}
В этом нет ничего плохого, но в этом нет необходимости, поскольку исключение
!!будет вести себя точно так же. В основном это скрытый!!в обычном режиме, в котором работает тестif.