React中不用三元运算符，实现输入存入数组并展示的问题排查

你的代码核心问题是把渲染逻辑放在了按钮的点击事件回调里——onClick只是处理点击行为的函数，它返回的JSX不会被React自动渲染到页面上。要实现点击按钮展示数组内容的功能，需要用状态来控制渲染时机，点击按钮只负责切换状态，渲染逻辑放在组件的返回结构中。

修改后的代码 #

import './App.css';
import { useState } from 'react';

function App() {
  const [array, setArray] = useState([]);
  // 新增状态：控制是否展示数组内容
  const [showContent, setShowContent] = useState(false);

  // 专门负责渲染数组内容的函数
  const renderArrayContent = () => {
    if (array.length > 0) {
      return array.map((value, index) => (
        // 注意map要加唯一key，这里用index临时替代，实际项目建议用业务唯一标识
        <p key={index}>{value}</p>
      ));
    }
    return null;
  };

  return (
    <div className="App">
      {/* 输入框：每次输入时把值追加到数组 */}
      <input 
        onChange={(event) => setArray([...array, event.target.value])} 
        placeholder="输入内容后点击按钮展示"
      />

      {/* 按钮：点击切换展示状态 */}
      <button onClick={() => setShowContent(true)}>点击展示内容</button>

      {/* 根据状态决定是否渲染数组内容 */}
      {showContent && renderArrayContent()}
    </div>
  );
}

export default App;

关键修改点 #

1. 新增showContent状态：用来标记是否需要展示数组内容，点击按钮时只需要切换这个状态即可
2. 拆分渲染函数：把原来clicked里的渲染逻辑抽成renderArrayContent，专门负责生成要展示的JSX
3. 在组件返回结构中触发渲染：通过{showContent && renderArrayContent()}判断，当状态为true时，调用渲染函数并把结果挂载到DOM上

如果想要实现「点击按钮切换显示/隐藏」的效果，只需要把按钮的onClick改成() => setShowContent(!showContent)即可。

内容的提问来源于stack exchange，提问作者DIE SQUAD