React结合Formik开发Todo应用时如何在组件间正确传递数据

核心逻辑是将待办列表的状态提升到公共父组件TaskContainer中，通过props向子表单组件传递提交回调，接收新任务后更新状态，再将状态传递到展示层即可完成数据流通。

1. 修改父组件TaskContainer代码 #

import React, { useState } from "react";
import { View, Text } from "react-native";
import MyForm from "./MyForm";

const TaskContainer = (props) => {
  // 父组件维护所有待办任务状态
  const [tasks, setTasks] = useState([]);

  // 定义新增任务的回调，传给子表单组件调用
  const addNewTask = (taskValue) => {
    setTasks(prevTasks => [...prevTasks, taskValue.task]);
  };

  return (
    <View>
      {/* 引入表单组件，传入提交回调 */}
      <MyForm onSubmit={addNewTask} />
      <Text>Here is your list:</Text>
      {/* 遍历渲染所有待办任务 */}
      {tasks.map((task, index) => (
        <Text key={index}>- {task}</Text>
      ))}
    </View>
  );
};

export default TaskContainer;

2. 修改子表单组件MyForm代码 #

import React from "react";
import { Formik } from "formik";
import { View, Button, TextInput } from "react-native";

function MyForm(props) {
  return (
    <View>
      <Formik
        initialValues={{ task: "" }}
        // 提交时调用父组件传入的回调，同时清空输入框
        onSubmit={(values, { resetForm }) => {
          props.onSubmit(values);
          resetForm();
        }}
      >
        {({ handleChange, handleSubmit, values }) => (
          <>
            <TextInput
              value={values.task}
              onChangeText={handleChange("task")}
              placeholder="Write a task"
            />
            <Button onPress={handleSubmit} title="Click" />
          </>
        )}
      </Formik>
    </View>
  );
}

export default MyForm;

• 该方案遵循React单向数据流规范，无需引入额外状态管理工具即可实现需求
• 后续如果需要实现删除任务、标记完成等功能，只需要在父组件定义对应操作函数，通过props传递给子组件调用即可
• 代码中为了简便使用index作为列表key，实际生产环境如果有任务唯一ID建议替换为任务ID，避免渲染异常

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