React应用列表渲染代码报错，请求定位并解决问题

你的代码在todo列表渲染部分存在3个语法问题，直接导致第60行报错：

• JSX中嵌入JavaScript逻辑必须用{}包裹，你直接写todoList.map会被当成普通文本，React无法识别
• map函数调用缺少闭合的)，语法不完整
• 渲染任务内容时用了(task)，这会固定显示字符串"(task)"，应该用{task}来读取变量值
• 额外提醒：React列表渲染需要给每个元素加唯一key属性，避免控制台警告

修复后的对应代码片段：

<div className="List">
  {todoList.map((task, index) => {
    return <h1 key={index}>{task}</h1>;
  })}
</div>

完整修复后的App.js代码：

import {useState} from "react";
import './App.css';
function App() {
    const [age, setAge] = useState(0);
    const [inputValue, setInputValue] = useState("");
    const [showText, setShowText] = useState(true);
    const [textColor, setTextColor] = useState("blue");
    const [count, setCount] = useState(0);
    const [todoList, setTodoList] = useState([]);
    const [newTask, setNewTask] = useState("");

    const increaseAge = () => {
    setAge(age + 1);
    };
    const decreaseAge = () => {
        setAge(age - 1);
    };
     const increaseAgeten = () => {
        setAge(age + 10);
     };
     const decreaseAgeten = () => {
        setAge(age - 10);
     };
    const increaseAgehundred = () => {
        setAge(age + 100);
     };
     const decreaseAgehundred = () => {
        setAge(age - 100);
     };
    const handleInputChange = (event) =>{setInputValue(event.target.value)}
       
        const increase = () => {
        setCount(count + 1)
        };
    const decrease = () => {
        setCount(count - 1)
    };
    const setToZero = () => {
        setCount(0)
    };
    const handleChange = (event) => {
    setNewTask(event.target.value);
    };
    
    const addTask = () => {
    const newTodoList = [...todoList, newTask];
    setTodoList(newTodoList);
    };
    
    return (
            <div className="App">
        <div className="addTask">
        <input onChange={handleChange}/>
        <button onClick={addTask}>Add Task</button>
        </div>
        <div className="List">
          {todoList.map((task, index) => {
            return <h1 key={index}>{task}</h1>;
          })}
        </div>
        {age}
        <br></br>
        
        <button onClick={increaseAge}>+1</button>
        <button onClick={decreaseAge}>-1</button>
        <br></br>
        <button onClick={increaseAgeten}>+10</button>
        <button onClick={decreaseAgeten}>-10</button>
        <br></br>
        <button onClick={increaseAgehundred}>+100</button>
        <button onClick={decreaseAgehundred}>-100</button>
        <br></br>
        <input type="text" onChange = {handleInputChange}/>
        {inputValue}
        <br></br>
        <button onClick={() => {setShowText(!showText)}}>
        Show/Hide
    </button>
        {showText && <h1>Shane</h1>}

        <button
    onClick={() => {setTextColor(textColor === "blue" ? "red" : "blue");}}>Change colour
</button>
        <h1 style={{ color: textColor }}>Blah</h1>
      
        
        <button onClick={increase}>Increase</button>
        <button onClick={decrease}>Decrease</button>
        <button onClick={setToZero}>Reset</button>
         <br></br>
        {count}
        </div> 
  );
}

export default App;

另外顺便移除了一处多余的{}：将{<h1 style={{ color: textColor }}>Blah</h1>}改成<h1 style={{ color: textColor }}>Blah</h1>，这部分不需要额外包裹大括号。

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