React & Formik，在组件之间传递数据

Question

我是React的初学者。我正在尝试创建我的第一个待办事项应用程序。目前，我有两个组件—一个带有输入和提交按钮(用于输入数据)—使用formik创建，第二个—我想要显示此数据的简单组件。我不确定如何在这些组件之间传递数据，我正在寻找如何正确地做到这一点的提示。

下面是我的代码:

第一个组件(输入数据):

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) => console.log(values)}
>
{({ handleChange, handleSubmit }) => (
<>
<TextInput
onChangeText={handleChange("task")}
placeholder="Write a task"
/>
<Button onPress={handleSubmit} title="Click" />
</>
)}
</Formik>
</View>
);
}
export default MyForm;

第二个组件(显示数据):

import React from "react";
import { View, Text } from "react-native";
import MyForm from "./MyForm";
const TaskContainer = (props) => {
return (
<View>
<Text>Here is your list:</Text>
</View>
);
};
export default TaskContainer;

下面是我想在第二个组件中显示的简单示例:

如有任何建议，我将不胜感激

Answer 1

问题的解决方案是在Parent component中创建任务的语句。之后，使用callback function(通过props传递它)来改变它的值(我使用useCallback)钩子，以防止无用的重新呈现子组件):

父组件

import React from 'react';
const ParentComponent = () => {
const [tasks, setTasks] = React.useState([]);
const addTask = React.useCallback(
(newTask) => {
setTasks([...tasks, newTask]);
},
[tasks]
);
return (
<>
<MyForm tasks={tasks} addTask={addTask} />
<TaskContainer tasks={tasks} />
</>
);
};

<<p>表单组件/strong>

import React from 'react';
import { Formik } from 'formik';
import { View, Button, TextInput } from 'react-native';
function MyForm({ tasks, setTasks }) {
return (
<View>
<Formik
initialValues={{ task: '' }}
onSubmit={(values) => setTasks(values)}>
{({ handleChange, handleSubmit }) => (
<>
<TextInput
onChangeText={handleChange('task')}
placeholder="Write a task"
/>
<Button onPress={handleSubmit} title="Click" />
</>
)}
</Formik>
</View>
);
}
export default MyForm;

<<p>任务组件/strong>

import React from 'react';
import { View, Text } from 'react-native';
import MyForm from './MyForm';
const TaskContainer = ({ tasks, setTasks }) => {
return (
<View>
<Text>Here is your list:</Text>
{tasks.map((task) => (
<Text>{task}</Text>
))}
</View>
);
};
export default TaskContainer;