页: 1 此处的错误
"use client"
import React from react
import { CiSearch } from react-icons/ci
import { FaPlus } from react-icons/fa
import Image from "next/image";
import { BsThreeDots } from react-icons/bs ;
import friend4 from "../public/src/man 1.jpg"
import friend2 from "../public/src/girl 2.jpg"
import friend3 from "../public/src/man 2.jpg"
import friend1 from "../public/src/man 3.jpg"
import { HiPlus } from react-icons/hi ;
import { useContext } from react ;
import { Contexts, LocalSContext } from ../contexts/LocalSContext ;
const Middle = () => {
const{ setTask, desc, myapp, setDesc, setType, HandAddTodo, HandRemove Todo } = 使用Context(Contexts)
// Blog Local----
return (
<div className= w-[96%] flex flex-col >
<div className= flex flex-row justify-between align-bottom h-20 >
<p className= text-gray-600 text-lg flex items-center justify-center pl-12 > Active Sprint</p>
<div className= bg-inherit w-1/4 border-b border-slate-300 h-[50%] mt-5 align-bottom justify-center align-center flex >
<input className= bg-inherit text-xs outline-none w-[70%] placeholder="Search task ,project ,label ..." />
<CiSearch className= w-[25px] h-[25px] mt-2 text-gray-400 />
</div>
</div>
<div className= w-full min-h-screen bg-indigo-50 rounded-[40px] items-center flex flex-col >
<div className= flex flex-row justify-between items-end h-[60px] w-[93%] >
<div className= flex flex-row gap-2 items-center >
<Image
className= w-[35px] h-[35px] rounded-full
src={friend1}
alt= faceless
/>
<Image
className= w-[35px] h-[35px] rounded-full
src={friend3}
alt= faceless
/>
<Image
className= w-[35px] h-[35px] rounded-full
src={friend2}
alt= faceless
/>
<Image
className= w-[35px] h-[35px] rounded-full
src={friend4}
alt= faceless
/>
<button className=" w-[120px] shadow-lg text-sm font-semibold h-[30px] ml-3 shadow-gray-300 rounded-2xl bg-white text-black border-0 hover:bg-blue-200 hover:text-blue-600">
Invite People
</button>
</div>
<div className="">
<div className=" w-[142px] h-[42px] text-white border-0 flex rounded-full justify-center items-center bg-blue-600 hover:bg-white hover:text-blue-600">
<button
className=" flex flex-row items-center justify-between gap-3 "
>
<p className= text-[13px] font-semibold text-gray-200 >Create Task</p>
<div className= bg-blue-400 rounded-full w-[26px] h-[26px] flex items-center justify-center >
<HiPlus className=" w-[16px] h-[16px] text-gray-200 " />
</div>
</button>
</div>
</div>
</div>
<div className= grid grid-flow-col grid-cols-4 w-full mt-1 justify-items-center h-auto gap-x-4 pl-5 pr-5 >
{/* backlock */}
<div className= flex flex-col align-middle w-[100%] items-center >
<div className= flex flex-col justify-center align-middle w-[90%] h-[100px] items-center >
<button className=" shadow-gray-300 h-[42px] shadow-md text-black border-0 text-base w-full font-semibold pr-3 pl-3 rounded-xl items-center flex justify-between bg-white hover:bg-blue-200 hover:text-blue-600"
onClick={() =>
document.getElementById( my_modal_1 ).showModal()}
>
<p className= pl-1 id= Backlog >Backlog</p>
<div className= bg-blue-200 rounded-full w-[25px] h-[25px] flex items-center justify-center >
<FaPlus className=" text-blue-400 " />
</div>
</button>
<dialog id="my_modal_1" className=" p-10 rounded-3xl bg-white ">
<div className=" flex flex-col gap-2">
<div className="flex w-full flex-wrap md:flex-nowrap gap-4">
<select className="select w-full max-w-xs bg-blue-400 outline-none text-white rounded-2xl font-semibold "
onChange={(e) => setType(e.target.value)}>
<option disabled selected>Post type?</option>
<option id= backlog >Backlog</option>
<option id= todo >To Do</option>
<option id= inprogress >In Progress</option>
<option id= completed >Completed</option>
</select>
</div>
<div className="App">
<header className="App-header">
<div className="todo-input flex flex-col gap-5 pt-3 w-[70%]">
<div className="flex w-full flex-wrap md:flex-nowrap gap-4">
<select className="select w-full max-w-xs border-none border-inherit bg-blue-400 outline-none text-white rounded-2xl font-semibold"
onChange={(e) => setTask(e.target.value)}>
<option disabled selected>Pick your Title.</option>
<option id= banner className= bg-red-400 >Banner</option>
<option id= illustration >Illustration</option>
<option id= video >Video</option>
<option id= uiux >UI UX</option>
</select>
</div>
<input
className= w-60% h-[20px] bg-white outline-none border-b-2 text-black
id= Title
type="text"
placeholder="Description"
value={desc}
onChange={(e) => setDesc(e.target.value)}
/>
<p className="py-4 text-gray-400">Press ESC key or click the button below to close</p>
<form method="dialog" className= flex flex-row gap-2 >
<button className="btn bg-blue-500 text-white border-0 outline-none hover:bg-white hover:text-black" onClick={handleAddTodo}>Add</button>
<button className="btn bg-blue-500 text-white border-0 outline-none hover:bg-white hover:text-black">Close</button>
</form>
</div>
</header>
</div>
</div>
</dialog>
</div>
<div className= flex flex-col justify-center w-full items-start >
<ul className="todo-list items-center flex flex-col gap-5 w-full h-auto justify-center ">
{(myapp || [])?.map((blog: any, index: number) => {
if (blog.type === "Backlog") {
return <>
<div className= bg-white rounded-2xl flex shadow-lg shadow-gray-300 flex-col w-[90%] justify-center gap-4 items-center >
<div className= flex flex-row mt-2 justify-between w-[90%] >
<h1 className= text-black w-[90%] >
<li className= text-gray-700 md:break-words w-[90%] mb-3 flex flex-row text-xs justify-between items-center rounded-lg id={blog.title} key={index}>
{blog.title}
{/* {JSON.stringify(_cards)} */}
</li>
</h1>
<button className=" text-gray-300 items-center flex justify-center w-[10%] h-[20px] " onClick={() => handleRemoveTodo(index)}>
<BsThreeDots />
</button>
</div>
<li className= text-gray-700 md:break-words w-[90%] mb-3 flex flex-row text-xs justify-between items-center rounded-lg id={blog.desc} key={`blog-${index}`}>
{blog.desc}
</li>
</div>
</>;
}
}
)}
</ul>
</div>
</div>
其背景文件夹
use client
import { createContext, useEffect, useState,Provider } from "react";
import React from react
import Middle from "../component/Middle";
const Contexts =createContext()
function LocalSContext() {
const [task, setTask] = useState( );
const [tyPe, setType] = useState( );
const [desc, setDesc] = useState( );
const blog = {
"type": tyPe,
"title": task,
"desc": desc
}
//localstorage aas todonuudig awah
const [myapp, setMypp] = useState(() => {
if (typeof window !== undefined ) {
return JSON.parse(localStorage.getItem( myApp )) || [];
}
})
useEffect(() => {
localStorage.setItem( myApp , JSON.stringify(myapp))
}, [myapp])
// todo nemegdeh
const handleAddTodo = () => {
if (myapp !== null) {
setMypp([...myapp, blog]);
setDesc( )
}
};
const handleRemoveTodo = (index: number) => {
const newTodos = myapp.filter((_, i) => i !== index);
setMypp(newTodos);
};
return (
<Contexts.Provider value={{setTask, desc, myapp, setDesc, setType, handleAddTodo, handleRemoveTodo}}>
<Middle/>
</Contexts.Provider>
)
}
export {Contexts,LocalSContext}
const{ setTask, desc, myapp, setDesc, setType, HandAddTodo, HandRemove Todo } = 使用Context(Contexts)
giving error on values -
TypeError: Cannot destructure property setTask of (0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...) as it is undefined. at Middle (./app/component/Middle.tsx:33:13) digest: "44794283" 23 | 24 |
25 | const{ setTask, desc, myapp, setDesc, setType, HandAddTodo, HandRemove Todo } = 使用Context(Contexts) | ^ 26 | 27 | // Blog Local---- 28 | GET / 500 in 939ms
页: 1
Unhandled Rugtime Error
类型: 任务权方不能被结构化
你们能够帮助我。 ry 英语不好,不好。