React TypeScript子组件向父组件传递状态数据问题求助

问题分析 #

你的代码存在核心问题导致数据无法正常传递：

1. 子组件未触发回调函数：Child.tsx中的getTodos函数仅返回父组件传入的create回调，从未实际调用它，父组件永远接收不到子组件的todos数据。
2. 子组件缺少数据加载逻辑：没有实现从localStorage读取todos并初始化状态的代码，也未在数据加载完成后通知父组件。
3. 父组件状态打印时机错误：初始化阶段的console.log仅执行一次，状态更新后不会重新打印，容易造成状态未更新的误解。

修复方案 #

1. 修复Child.tsx #

添加localStorage数据读取逻辑，在数据加载完成后调用父组件传入的create回调，将todos传递给父组件：

import { useEffect, useState } from 'react';
import { ITodo } from './ITodo';

interface TodosPageProps {
    create(todos: ITodo[]): void;
}

export const TodosPage: React.FC<TodosPageProps> = ({ create }) => {
  const [todos, setTodos] = useState<ITodo[]>([]);

  useEffect(() => {
    // 从localStorage读取存储的todos
    const storedTodos = localStorage.getItem('todos');
    if (storedTodos) {
      const parsedTodos: ITodo[] = JSON.parse(storedTodos);
      setTodos(parsedTodos);
      // 将读取到的数据传递给父组件
      create(parsedTodos);
    }
  }, [create]);

  // 若后续todos本地状态发生变化（如新增/删除），需同步调用create更新父组件状态
  // 示例：const handleAddTodo = (newTodo: ITodo) => {
  //   const newTodos = [...todos, newTodo];
  //   setTodos(newTodos);
  //   create(newTodos);
  // }

  return (
    <div>
      {todos.map(todo => (
        <div key={todo.id}>{todo.title}</div>
      ))}
    </div>
  );
};

2. 修复Parent.tsx #

调整状态打印时机，使用useEffect监听状态变化，确保能看到最新的todos数据：

import { useState, useEffect } from 'react';
import { TodosPage } from './Child';
import { ITodo } from './ITodo';

const Parent = () => {
  const [todosChild, setTodosChild] = useState<ITodo[]>([]);

  const getTodos = (todos: ITodo[]) => {
    setTodosChild(todos);
  };

  // 监听状态变化，打印最新数据
  useEffect(() => {
    console.log('父组件接收到的todos:', todosChild);
  }, [todosChild]);

  return (
    <div>
      <h2>父组件展示的todos:</h2>
      {todosChild.map(todo => (
        <div key={todo.id}>{todo.title}</div>
      ))}
      <TodosPage create={getTodos} />
    </div>
  );
};

export default Parent;

补充说明 #

• localStorage存储的是字符串，读取时需用JSON.parse解析为对象数组，存储时需用JSON.stringify转换为字符串。
• 若子组件的todos状态后续有更新操作，需同步调用create方法，保证父子组件状态一致。

内容的提问来源于stack exchange，提问作者Андрей Димитриев