英语 | https://javascript.plainenglish.io/its-2023-please-stop-using-for-conditional-rendering-in-react-b588a09ebb17
React 是两个现阶段盛行的后端架构众所周知，能协助他们高效率地构筑用户介面。但在采用React展开合作开发时，他们却无法恰当采用&&，很难引致UI严重错误。因而，他们须要晓得，&&操作符引致的React UI介面严重错误。怎样组织工作？他们如果用甚么替代&&？1. &&操作符引致的React UI介面严重错误为0，则不该表明。const App = () => { const [list, setList] = React.useState([]); const fetchList = () => { // Simulate fetching data from the server via setTimeout setTimeout(() => { setList([]) }, 1000) } React.useEffect(() => {fetchList() }, []) return ( list.length && ( <div className=“name-list-container”> {list.map((name) => {return<div className=“name-list-item”>{name}</div>; })} </div> ) );};ReactDOM.render(<App />, document.getElementById(app))眼见为实，我的朋友们，所以请点击此Codepen的链接展开查看。
地址：https://codepen.io/qianlong/pen/BarvKbW?editors=1010
你会注意到，当 list 是两个空数组时，页面将呈现 0 而不是甚么都没有。
我的天哪，这到底是怎么回事？
2.&& 是怎样组织工作的？
这是两个 React 严重错误吗？值得庆幸的是，这个问题的原因不是因为 React 犯了严重错误，而是与 Javascript 本身的组织工作方式有关。
来自 MDN的解释：当且仅当所有操作数都为真时，一组布尔操作数的逻辑与 (&&) 操作符（逻辑合取）才为真。否则就是假的。
一般操作符返回从左到右计算时遇到的第两个假操作数的值，或者如果它们都是真值，则返回最后两个操作数的值。
让他们学习两个非常简单的例子，我想你会很快理解的。
const a = 0const b = “React”const c = 1const d = “Javascript”console.log(a && b) // 0console.log(c && d) // Javascript当你在代码中采用a && b时，如果a为0，则直接返回，不再计算b的值。
你一定明白为甚么上面的 React 例子表明 0 了。
3.他们如果用甚么来替代&&？
&& 操作符很难出错，他们是否如果放弃采用它呢？
不，他们不该该那样做。他们能尝试这3种方式来避免这个问题。
3.1 采用！!list.length
他们能把数组的长度转成布尔值，就不会再出现这个严重错误了。
// 1. Convert list.length to boolean!!list.length && <Component list={list} />3.2 采用 list.length >= 1
和上面的原理一样，他们用另一种方式将其转为布尔值。
// 2. Controlled by specific logiclist.length >= 1 && <Component list={list} />;3.3 采用三元表达式
如果您的应用程序不是特别复杂并且仅采用 1 或 2 个三元表达式即可解决，我会推荐它。
// 3. Use ternary expressions and nulllist.length ? <Component list={list} /> : null;结尾
以上这就
最后，感谢你的阅读。
学习更多技能
