React中获取输入值并添加至列表功能失效，求排查问题

你的代码存在三个关键问题，直接导致功能失效：

1. 状态类型误用 #

list初始定义为数组，但trackList函数里把它赋值成了输入框的字符串值，破坏了原本的数组类型，后续基于数组的操作逻辑全部出错。应该单独用一个状态存储输入框的实时内容，比如inputValue。

2. 添加列表项逻辑错误 #

addTodos里尝试通过[...list]创建新数组，但此时list已经是字符串，展开后会得到单个字符组成的数组，完全不符合添加完整输入内容的需求。正确逻辑是把当前输入值追加到todos数组末尾。

3. map渲染未返回元素 #

todos.map的回调函数里没有返回<li>元素，React无法识别要渲染的内容。要么显式添加return，要么把大括号改成小括号让箭头函数自动返回。

修复后的完整代码 #

import { useState } from "react";
import "./App.scss";

function App() {
    // 单独用inputValue存储输入框的值，原list状态可删除
    const [inputValue, setInputValue] = useState("");
    const [todos, setTodos] = useState([]);

    const trackList = (e) => {
        setInputValue(e.target.value);
    };

    const addTodos = () => {
        // 过滤空输入，避免添加空项
        if (!inputValue.trim()) return;
        // 将新输入值追加到现有todos数组
        setTodos([...todos, inputValue]);
        // 添加完成后清空输入框
        setInputValue("");
    };

    return (
        <div className="App">
            <input onChange={trackList} type="text" value={inputValue} />
            <button onClick={addTodos}>Add</button>
            <ul>
                {todos.map((todo, index) => (
                    // 给列表项添加唯一key，符合React渲染规范
                    <li key={index}>{todo}</li>
                ))}
            </ul>
        </div>
    );
}

export default App;

额外优化：给input加上value={inputValue}转为受控组件，确保输入框值与状态完全同步；列表渲染时添加key属性，避免React渲染警告。

内容的提问来源于stack exchange，提问作者jj-ammar