编译Create React App出现空白屏及控制台报错求助

核心错误分析 #

1. JSX标签语法错误
   App.js里存在无效的标签嵌套：第二个<input type="text">未正确闭合，末尾还多了一个无匹配的</input>，这会直接导致JSX解析失败，触发编译报错，页面自然无法渲染。

2. 列表渲染缺少唯一key
   React渲染列表项时，必须为每个子元素提供唯一的key属性，否则会触发警告，也可能影响组件渲染稳定性。

修正后的App.js代码 #

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

function App() {
  const [todos, setTodos] = useState(["take the dogs out for a walk", 
  "take the trash out"]);
  const [input, setInput] = useState("");

  // 补充受控组件的 onChange 事件，否则绑定value的输入框会只读
  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  return (
    <div className='app'>
      <h1>Welcome to my TODO List</h1>  
      <input value={input} type="text" onChange={handleInputChange} />
      <input type="text" />
      <button>Add todo</button>

      <h2>List of todos</h2>
      {todos.map((todo, index) =>(
        {/* 使用索引作为key（仅适合静态列表，动态列表建议用唯一ID） */}
        <p key={index}>{todo}</p>
      ))}
    </div>
  );
}

export default App;

额外说明 #

• 绑定了value={input}的输入框必须配合onChange事件，否则会变成只读状态，这是React受控组件的基本要求。
• 若后续todo列表会动态增删，建议用每个todo的唯一标识作为key，而非索引，避免组件渲染异常。

内容的提问来源于stack exchange，提问作者brent malo