在 React useState 中使用（Or ||）语法进行赋值-解网

问：

我正在观察一种我以前在 react useState 钩子中从未见过的新语法。它

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

我以前从未见过在useState中使用过这种结构。我知道它是一个 javascript 原生逻辑运算符，但我很好奇如何在 useState 的上下文中解释它。

它本质上是否意味着，“如果这些事情中的任何一个是真的，就把它设置为事情？是假设它们两个永远不可能同时是真的吗？

JavaScript ReactJS 语法 React-Hooks 逻辑

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赞 Miroslav Glamuzina 3/17/2020 #3

Javascript 中的双管运算符（逻辑 OR）将返回第一个可以转换为的值。true

这并不是 React 独有的，它是一个烘焙的 vanilla-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，请考虑使用 nullish 合并运算符

上一个：将数据库从远程服务器导出到计算机上的特定文件夹中

下一个：D3：对象调用前的 + 运算符

在 React useState 中使用（Or ||）语法进行赋值

Using (Or ||) syntax inside of React useState for assignment

评论

在 React useState 中使用 （Or ||） 语法进行赋值

Using (Or ||) syntax inside of React useState for assignment

评论

在 React useState 中使用（Or ||）语法进行赋值