React函数式组件中如何在JSX表达式中使用state值？

你遇到的问题是因为在字符串拼接时错误地用大括号包裹了page变量，导致它被转换成了一个对象。

错误原因 #

在JSX的{}表达式内部，你已经处于JavaScript执行环境中，不需要再用额外的{}包裹变量。'Load Page ' + {page}这行代码里，{page}等价于创建了一个{page: page}的对象，当字符串与对象拼接时，JavaScript会把对象转换成[object Object]，所以才会出现不符合预期的输出。

几种正确写法 #

1. 直接拼接变量
   去掉变量外的大括号，直接使用page即可：

   function App() {
     const [isLoading, setIsLoading] = useState(false);
     const [page, setPage] = useState(1);
   
     return (
       <div>
         {isLoading ? `Loading...` : 'Load Page ' + page}
       </div>
     );
   }
   
   export default App;
   

2. 使用模板字符串（推荐）
   用ES6模板字符串的${}语法插入变量，写法更简洁直观：

   function App() {
     const [isLoading, setIsLoading] = useState(false);
     const [page, setPage] = useState(1);
   
     return (
       <div>
         {isLoading ? `Loading...` : `Load Page ${page}`}
       </div>
     );
   }
   
   export default App;
   

3. 拆分JSX元素写法
   如果需要更复杂的内容，可以用片段包裹拆分后的内容：

   function App() {
     const [isLoading, setIsLoading] = useState(false);
     const [page, setPage] = useState(1);
   
     return (
       <div>
         {isLoading ? (
           `Loading...`
         ) : (
           <>Load Page {page}</>
         )}
       </div>
     );
   }
   
   export default App;
   

以上几种写法都能正确渲染出Load Page 1的预期结果。

内容的提问来源于stack exchange，提问作者Rob E.