Javascript 如何使用react钩子将对象数组数据从子组件发送到父组件并存储在父对象中？

这是我的父组件js文件

import React, { useContext, useState } from "react";
import TaskListContextProvider from "./TaskListContext";
import TaskList from "./TaskList";
import TaskForm from "./TaskForm";

const AddMenu = () => {
  const [menu, setMenu] = useState({
    menuName: "",
    tag: "",
    price: "",
    menuItem: ""
  });


  const addMenu = (e) => {
    const { name, value } = e.target;
    setMenu((preValue) => {
      return {
        ...preValue,
        [name]: value,
      };
    });
    
  };

   //function to recieve data from child component
    const addList=(data)=> {
    setMenu([...data,{menuItem:data}]);
   };

  const onSubmit = (e) => {
    e.preventDefault();
    console.log(menu);
  };

  return (
        <div className="form-row">
          <div className="form-group">
            <input
              type="text"
              name="menuName"
              onChange={addMenu}
              value={menu.menuName}
            />
          </div>
          <div className="form-group">
            <input
              type="text"
              name="tag"
              onChange={addMenu}
              value={menu.tag}
            />
          </div>
          <div className="form-group">
            <div className="main">
              <TaskListContextProvider addList={addList}>
                <TaskForm />
                <TaskList />
              </TaskListContextProvider>
            </div>
          </div>
          <div>
            <input
              type="number"
              name="price"
              onChange={addMenu}
              value={menu.price}
            />
          </div>
        </div>
        <button
          type="submit"
          onClick={onSubmit}
        >
          Save
        </button>
  );
};

export default AddMenu;

import uuid from 'uuid'

export const TaskListContext = createContext()

const TaskListContextProvider = props => {
  const initialState = JSON.parse(localStorage.getItem('tasks')) || []
  
  const [editItem, setEditItem] = useState(null)
  const [tasks, setTasks] = useState(initialState)
  
// call-back function...
//   const sendData=()=>{
//     props.addList(tasks);
//   }
//   sendData();

  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks))
    console.log(tasks);
    props.addList(tasks);
  }, [tasks])

    
  // Add tasks
  const addTask = title => {
    setTasks([...tasks, { title, id: uuid() }]) 
  }
  
  // Remove tasks
  const removeTask = id => {
    setTasks(tasks.filter(task => task.id !== id))
  }
  
  // Clear tasks
  const clearList = () => {
    setTasks([])
  }
  
  // Find task
  const findItem = id => {
    const item = tasks.find(task => task.id === id)
    setEditItem(item)
  }

  // Edit task
  const editTask = (title, id) => {
    const newTasks = tasks.map(task => (task.id === id ? { title, id } : task))
    
    console.log(newTasks)

    setTasks(newTasks)
    setEditItem(null)
  }

  return (
    <TaskListContext.Provider
      value={{
        tasks,
        addTask,
        removeTask,
        clearList,
        findItem,
        editTask,
        editItem
      }}
    >
      {props.children}
    </TaskListContext.Provider>
  )
}

export default TaskListContextProvider 

import React，{useContext，useState}来自“React”；
从“/TaskListContext”导入TaskListContextProvider；
从“/TaskList”导入任务列表；
从“/TaskForm”导入TaskForm；
常量添加菜单=（）=>{
常量[菜单，设置菜单]=使用状态({
Menuame:“，
标签：“”，
价格：“，
菜单项：“
});
常量添加菜单=（e）=>{
常量{name，value}=e.target；
设置菜单（（预值）=>{
返回{
…前值，
[名称]：值，
};
});
};
//函数从子组件接收数据
常量addList=（数据）=>{
setMenu（[…data，{menuItem:data}]）；
};
const onSubmit=（e）=>{
e、 预防默认值（）；
控制台日志（菜单）；
};
返回(
拯救
);
};
导出默认添加菜单；

这是我的子组件js文件

import React, { useContext, useState } from "react";
import TaskListContextProvider from "./TaskListContext";
import TaskList from "./TaskList";
import TaskForm from "./TaskForm";

const AddMenu = () => {
  const [menu, setMenu] = useState({
    menuName: "",
    tag: "",
    price: "",
    menuItem: ""
  });


  const addMenu = (e) => {
    const { name, value } = e.target;
    setMenu((preValue) => {
      return {
        ...preValue,
        [name]: value,
      };
    });
    
  };

   //function to recieve data from child component
    const addList=(data)=> {
    setMenu([...data,{menuItem:data}]);
   };

  const onSubmit = (e) => {
    e.preventDefault();
    console.log(menu);
  };

  return (
        <div className="form-row">
          <div className="form-group">
            <input
              type="text"
              name="menuName"
              onChange={addMenu}
              value={menu.menuName}
            />
          </div>
          <div className="form-group">
            <input
              type="text"
              name="tag"
              onChange={addMenu}
              value={menu.tag}
            />
          </div>
          <div className="form-group">
            <div className="main">
              <TaskListContextProvider addList={addList}>
                <TaskForm />
                <TaskList />
              </TaskListContextProvider>
            </div>
          </div>
          <div>
            <input
              type="number"
              name="price"
              onChange={addMenu}
              value={menu.price}
            />
          </div>
        </div>
        <button
          type="submit"
          onClick={onSubmit}
        >
          Save
        </button>
  );
};

export default AddMenu;

import uuid from 'uuid'

export const TaskListContext = createContext()

const TaskListContextProvider = props => {
  const initialState = JSON.parse(localStorage.getItem('tasks')) || []
  
  const [editItem, setEditItem] = useState(null)
  const [tasks, setTasks] = useState(initialState)
  
// call-back function...
//   const sendData=()=>{
//     props.addList(tasks);
//   }
//   sendData();

  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks))
    console.log(tasks);
    props.addList(tasks);
  }, [tasks])

    
  // Add tasks
  const addTask = title => {
    setTasks([...tasks, { title, id: uuid() }]) 
  }
  
  // Remove tasks
  const removeTask = id => {
    setTasks(tasks.filter(task => task.id !== id))
  }
  
  // Clear tasks
  const clearList = () => {
    setTasks([])
  }
  
  // Find task
  const findItem = id => {
    const item = tasks.find(task => task.id === id)
    setEditItem(item)
  }

  // Edit task
  const editTask = (title, id) => {
    const newTasks = tasks.map(task => (task.id === id ? { title, id } : task))
    
    console.log(newTasks)

    setTasks(newTasks)
    setEditItem(null)
  }

  return (
    <TaskListContext.Provider
      value={{
        tasks,
        addTask,
        removeTask,
        clearList,
        findItem,
        editTask,
        editItem
      }}
    >
      {props.children}
    </TaskListContext.Provider>
  )
}

export default TaskListContextProvider 

从“uuid”导入uuid
export const TaskListContext=createContext（）
const TaskListContextProvider=props=>{
const initialState=JSON.parse（localStorage.getItem（'tasks'））| |[]
常量[editItem，setEditItem]=useState（null）
const[tasks，setTasks]=useState（initialState）
//回拨功能。。。
//const sendData=（）=>{
//道具添加列表（任务）；
//   }
//sendData（）；
useffect（（）=>{
localStorage.setItem（'tasks'，JSON.stringify（tasks））
console.log（任务）；
道具添加列表（任务）；
}，[任务]）
//添加任务
const addTask=title=>{
setTasks（[…tasks，{title，id:uuid（）}]）
}
//删除任务
const removeTask=id=>{
setTasks（tasks.filter（task=>task.id！==id））
}
//明确任务
常量clearList=（）=>{
setTasks（[]））
}
//查找任务
const findItem=id=>{
const item=tasks.find（task=>task.id==id）
setEditItem（项目）
}
//编辑任务
const editTask=（标题，id）=>{
const newTasks=tasks.map（task=>（task.id==id？{title，id}:task））
console.log（newTasks）
设置任务（新任务）
setEditItem（空）
}
返回(
{props.children}
)
}
导出默认TaskListContextProvider

我的问题：如何将包含对象数组的子组件“任务”变量数据发送到父组件，并将其存储到对象“菜单项”中，因此每当我单击“保存”按钮时，控制台上就会显示菜单？？？

您可以这样做

  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks))
    props.addList(tasks);
  }, [tasks])

---

在将任务设置到本地存储后，您可以立即将数据发送给家长。

请不要只发布代码作为答案，还要解释代码的作用以及如何解决问题。带解释的答案通常更有帮助，质量更好，更容易吸引选票。我用解释更新了我的答案。如果它有助于向上投票，那就好了：PIt可以工作，但如果我再次按下save按钮，只获取任务数据，而不显示其他父组件对象：menuName:，tag:，price:，我还更新了我的上述代码…const addList=（data）=>{setMenu（[…data，{menuItem:data}]）；这一行在做什么？它获取所有以前的数据并将tasks变量添加到menuItem对象中。你能修正这个函数吗？我有一个问题，如何只将“任务”变量数据（包含对象数组）传递到menuItem中，并保持其他对象不变？？