Использование (или ||) синтаксиса внутри React useState для назначения - PullRequest
Новая
       9

Использование (или ||) синтаксиса внутри React useState для назначения

3 голосов
/ 16 марта 2020

Я наблюдаю новый синтаксис, который я не видел раньше в ответе useState. Это 

const [thing, setThing] = useState(thing || otherThing);

Я никогда не видел этого или конструкции, используемой внутри useState прежде. Я знаю, что это оператор javascript native logi c, но мне любопытно, как именно его интерпретировать в контексте useState.

Значит ли это, по сути, что «если какая-то из этих вещей истинна, установить ее на вещь?» Предполагается ли, что обе они никогда не могут быть истинными одновременно?

Ответы [ 3 ]

2 голосов
/ 16 марта 2020

Просто используется как краткий синтаксис для объявления запасного варианта. Если первая переменная ложная, она возвращается ко второй.

Пример с null первое значение: 

const {useState} = React;

const test = null;
const fallback = 'fallback';

const Example = () => {
  const [state, setState] = useState(test || fallback);

   console.log("state: ", state); // Logs the value of fallback
   
   return <span />
}

ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

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

const {useState} = React;

const test = 'first priority';
const fallback = true;

const Example = () => {
  const [state, setState] = useState(test || fallback);

   console.log("state: ", state); // Logs the value of test
   
   return <span />
}

ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
2 голосов
/ 16 марта 2020

Оператор Double Pipe (логическое ИЛИ) в Javascript вернет первое значение, которое может быть преобразовано в true.

Это не только React, это запеченный в ванили - JS оператор, который вы можете использовать где угодно.

Вот несколько примеров (взятых из MDN): 

o1 = true  || true       // t || t returns true
o2 = false || true       // f || t returns true
o3 = true  || false      // t || f returns true
o4 = false || (3 == 4)   // f || f returns false
o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
o6 = false || 'Cat'      // f || t returns "Cat"
o7 = 'Cat' || false      // t || f returns "Cat"
o8 = ''    || false      // f || f returns false
o9 = false || ''         // f || f returns ""
o10 = false || varObject // f || object returns varObject

Примечание. Если вы используете этот оператор для предоставления значения по умолчанию для некоторой переменной, помните, что любое ложное значение не будет использоваться. Если вам нужно только отфильтровать значение null или undefined, рассмотрите возможность использования оператора объединения nulli sh

0 голосов
/ 16 марта 2020

const [thing, setThing] = useState(thing || otherThing);

Если одно из thing или otherThing соответствует истинному выражению, то вызывается useState(true) и возвращается кортеж из 2 элементов.

Если и thing, и otherThing не приводят к истинному выражению, тогда вызывается useState(false) и возвращает кортеж из 2 элементов.

Некоторые примеры неверных выражений:

  • false
  • null
  • undefined
  • ""
  • []
  • {}
  • 1+1==3
...