React Todo列表：JSON数据展示与添加新项冲突及空白li问题

核心问题拆解 #

你遇到的两个问题本质是状态管理混乱和组件职责划分错误，以下是针对性解决步骤：

1. 解决「同时启用功能页面清空」问题 #

页面清空是因为你可能用了互斥的渲染逻辑（比如条件渲染覆盖所有内容），或者子组件错误地重写了父组件状态。正确的做法是：

• 把todos状态统一放在父组件（比如App.js）中管理，JSON展示和Todo列表渲染是并行的两个模块，不要让它们互相覆盖。
• 在父组件中同时渲染「JSON数据展示区」和「Todo表单+列表区」，比如用两个独立的<div>或标题分隔。

2. 解决「添加新Todo生成空白li」问题 #

空白li是因为添加Todo时没有正确传递输入值，或者状态更新时传入了空字符串。修复要点：

• 在ToDoForm.jsx中用受控组件管理输入框状态，确保能获取到用户输入的文本。
• 禁止在ToDoForm中渲染Todo列表，列表渲染逻辑交给父组件，子组件只负责提交新Todo的文本。

关键代码示例 #

父组件 App.js #

import { useState } from 'react';
import ToDoForm from './ToDoForm';

function App() {
  // 初始JSON格式的Todo数据
  const initialTodos = [
    { id: 1, text: '学习React' },
    { id: 2, text: '搭建Todo应用' }
  ];
  const [todos, setTodos] = useState(initialTodos);

  // 添加Todo的方法，接收子组件传递的文本
  const addTodo = (todoText) => {
    // 过滤空内容
    if (!todoText.trim()) return;
    const newTodo = {
      id: Date.now(), // 用时间戳生成临时唯一ID
      text: todoText
    };
    // 用函数式更新确保状态正确同步
    setTodos(prev => [...prev, newTodo]);
  };

  return (
    <div className="App">
      <h1>Todo 应用</h1>

      {/* 展示JSON格式的Todo数据 */}
      <div className="json-view">
        <h2>Todo 数据（JSON格式）</h2>
        <pre>{JSON.stringify(todos, null, 2)}</pre>
      </div>

      {/* Todo表单和列表区 */}
      <div className="todo-section">
        <h2>添加新Todo</h2>
        <ToDoForm addTodo={addTodo} />
        
        <h2>Todo列表</h2>
        <ul>
          {todos.map(todo => (
            <li key={todo.id}>{todo.text}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

子组件 ToDoForm.jsx #

import { useState } from 'react';

function ToDoForm({ addTodo }) {
  // 受控组件管理输入框文本
  const [inputText, setInputText] = useState('');

  const handleInputChange = (e) => {
    setInputText(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 把输入文本传递给父组件
    addTodo(inputText);
    // 清空输入框
    setInputText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputText}
        onChange={handleInputChange}
        placeholder="输入新的Todo..."
      />
      <button type="submit">添加</button>
    </form>
  );
}

export default ToDoForm;

验证效果 #

1. 启动项目后，页面会同时展示JSON数据和Todo列表，不会清空。
2. 在输入框填写内容并提交，会生成带文本的li，同时JSON数据也会同步更新。

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