reactjs 由于Next JS中其他兄弟组件的数据更新，导致一个兄弟组件重新呈现

rhfm7lfc  于 2022-12-18  发布在  React
关注(0)|答案(1)|浏览(144)

我有一个Next JS应用程序，我在其中使用了_app.tsx组件中的布局功能。我在布局中显示了一个侧边栏，它是通过API调用（get request）填充的。
现在我在Index.tsx文件中有另一个API调用（更新请求），这个更新请求改变了布局的侧边栏组件中的数据。
以下是我的代码片段
_app.tsx

import { type AppType } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";

import { trpc } from "../utils/trpc";

import "../styles/globals.css";
import MainLayout from "../components/layouts/MainLayout";

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
  return (
    <SessionProvider session={session}>
      <MainLayout>
        <Component {...pageProps} />
      </MainLayout>
    </SessionProvider>
  );
};

export default trpc.withTRPC(MyApp);

MainLayout.tsx

import React, { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";

import { trpc } from "../../utils/trpc";

import { AiOutlineOrderedList } from "react-icons/ai";
import { BsCartCheckFill, BsGraphUp, BsSuitHeartFill } from "react-icons/bs";
import { IoRefresh } from "react-icons/io5";
import { IoMdArrowBack } from "react-icons/io";
import { MdModeEditOutline } from "react-icons/md";

import { Space_Grotesk } from "@next/font/google";

import { SelectedData } from "@prisma/client";

const spaceGrotesk = Space_Grotesk({
  weight: "500",
  subsets: ["latin"],
});

type MainLayoutProps = {
  children: React.ReactNode;
};

type DefaultItemProps = {
  setItemMode: React.Dispatch<React.SetStateAction<"default" | "add" | "show">>;
  data: SelectedData[]
};

type ItemProps = {
  setItemMode: React.Dispatch<React.SetStateAction<"default" | "add" | "show">>;
};

const MainLayout = ({ children }: MainLayoutProps) => {
  const [itemMode, setItemMode] = useState<"default" | "add" | "show">(
    "default"
  );
  const pathname = useRouter().pathname.split("/")[1];

  const { data: selectedData } = trpc?.selectedData?.getAllData?.useQuery();

  return (
    <div className={`flex h-screen flex-row gap-0 ${spaceGrotesk.className}`}>
      <div className="flex min-h-full w-20 flex-col items-center justify-between bg-white py-6">
        <div className="rounded-full bg-[#3f3d56] p-3">
          <BsSuitHeartFill size="1.3rem" className="text-[#f9a109]" />
        </div>

        <div className="flex flex-col gap-12">
          <Link href="/">
            <span
              className={`tooltip rounded-full p-3 ${
                pathname === "" && "text-[#f9a109]"
              }`}
              id="Items"
            >
              <span className="hidden">Items</span>
              <AiOutlineOrderedList size="1.3rem" />
            </span>
          </Link>
          <Link href="/history">
            <span
              className={`tooltip rounded-full p-3 ${
                pathname === "history" && "text-[#f9a109]"
              }`}
              id="History"
            >
              <span className="hidden">History</span>
              <IoRefresh size="1.3rem" />
            </span>
          </Link>
          <Link href="/statistics">
            <span
              className={`tooltip rounded-full p-3 ${
                pathname === "statistics" && "text-[#f9a109]"
              }`}
              id="Statistics"
            >
              <span className="hidden">Statistics</span>
              <BsGraphUp size="1.3rem" />
            </span>
          </Link>
        </div>

        <div className="relative rounded-full bg-[#f9a109] p-3">
          <span className="absolute top-[-6px] right-[-6px] flex h-5 w-5 items-center justify-center rounded-lg bg-[#eb5757] p-2 text-white">
            3
          </span>
          <BsCartCheckFill size="1.3rem" className="text-white" />
        </div>
      </div>

      {children}

      {itemMode === "default" && <DefaultItem setItemMode={setItemMode} data={selectedData!} />}
      {itemMode === "add" && <AddItem setItemMode={setItemMode} />}
      {itemMode === "show" && <ShowItem setItemMode={setItemMode} />}
    </div>
  );
};

export default MainLayout;

const DefaultItem = ({ setItemMode, data }: DefaultItemProps) => {
  return (
    <div className="flex w-[20%] flex-col justify-between bg-white">
      <div className="flex h-full flex-col items-center gap-5 bg-[#fff0de] py-6 px-5">
        <div className="flex items-center justify-center gap-7 rounded-lg bg-[#80485b] px-6">
          <img
            className="relative right-1 h-32 w-12 -translate-y-4 rotate-[-20deg]"
            src="/kissclipart-cola-bottle-png-clipart-fizzy-drinks-beer-bottle-853f3ea787dad24a-removebg-preview.png"
            alt="bear-bottle"
          />

          <div className="flex flex-col items-center justify-center gap-3">
            <span className="text-white">Didn't find what you need?</span>
            <button
              onClick={() => setItemMode("add")}
              className="w-fit rounded-xl bg-white px-4 py-2 text-[#80485b]"
            >
              Add Item
            </button>
          </div>
        </div>

        <div className="flex w-full items-center justify-between">
          <span className="text-xl">Shopping List</span>
          <MdModeEditOutline size="1.3rem" />
        </div>

        <div className="flex flex-col gap-5">
          <div className="flex max-h-[440px] flex-col gap-4 overflow-y-auto px-1">
            {data?.map((item) => (
              <div className="flex flex-col gap-2" key={item.id}>
                <span className="text-[14px] text-slate-500">
                  {item.name}
                </span>
                <div className="flex flex-col gap-1">
                  {item?.items.map((item: string, i: number) => (
                    <div key={i} className="flex items-center justify-between">
                      <span className="min-w-[179px] max-w-[180px] truncate">
                        {item}
                      </span>
                      <button className="rounded-lg border-2 border-[#f9a109] px-2 py-1 text-[#f9a109]">
                        3 pcs
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="my-5 flex items-center justify-center rounded-xl  border-2 border-[#f9a109]">
        <input
          className="w-full bg-transparent px-4 outline-none"
          placeholder="Enter a name"
          type="text"
          title="name"
        />
        <button className="rounded-lg bg-[#f9a109] px-5 py-3 text-white">
          Save
        </button>
      </div>
    </div>
  );
};

const AddItem = ({ setItemMode }: ItemProps) => {
  return (
    <div className="flex min-h-full w-[20%] flex-col justify-between gap-7 bg-white py-5 px-4">
      <div className="flex flex-col gap-5">
        <h3 className="text-2xl">Add a new item</h3>

        <div className="flex flex-col gap-5">
          <div className="flex flex-col gap-1">
            <label htmlFor="name">Name</label>
            <input
              className="rounded-lg border-2 border-stone-500 px-4 py-2 outline-none hover:border-[#f9a109] focus:border-[#f9a109]"
              placeholder="Enter a name"
              type="text"
              id="name"
            />
          </div>

          <div className="flex flex-col gap-1">
            <label htmlFor="note">Note (optional)</label>
            <textarea
              className="rounded-lg border-2 border-stone-500 px-4 py-2 outline-none hover:border-[#f9a109] focus:border-[#f9a109]"
              placeholder="Enter a note"
              rows={4}
              id="note"
            />
          </div>

          <div className="">
            <label htmlFor="images">Images</label>
            <input
              className="w-full rounded-lg border-2 border-stone-500 px-4 py-2 outline-none hover:border-[#f9a109] focus:border-[#f9a109]"
              placeholder="Enter an url"
              type="text"
              id="images"
            />
          </div>

          <div className="flex flex-col gap-1">
            <label htmlFor="category">Category</label>
            <input
              className="rounded-lg border-2 border-stone-500 px-4 py-2 outline-none hover:border-[#f9a109] focus:border-[#f9a109]"
              placeholder="Enter a category"
              type="text"
              id="category"
            />
          </div>
        </div>
      </div>

      <div className="flex items-center justify-between">
        <button
          onClick={() => setItemMode("default")}
          className="rounded-lg px-5 py-3"
        >
          Cancel
        </button>

        <button
          onClick={() => setItemMode("show")}
          className="rounded-lg bg-[#f9a109] px-5 py-3 text-white"
        >
          Save
        </button>
      </div>
    </div>
  );
};

const ShowItem = ({ setItemMode }: ItemProps) => {
  return (
    <div className="flex min-h-full w-[20%] flex-col justify-between gap-7 bg-white py-5 px-4">
      <div className="flex flex-col gap-5">
        <button className="flex items-center gap-2 px-3 text-[#f9a109]">
          <IoMdArrowBack size="1.3rem" /> back
        </button>

        <div className="flex flex-col gap-5">
          <div className="flex items-center justify-center">
            <img
              className="h-44 rounded-lg"
              src="/avocado-slices-500x500.jpg"
              alt="item-image"
            />
          </div>

          <div className="flex flex-col gap-1">
            <h6 className="text-gray-500">Name</h6>
            <span className="text-lg">Avocado</span>
          </div>

          <div className="flex flex-col gap-1">
            <h6 className="text-gray-500">Category</h6>
            <span className="text-lg">Fruits and Vegetable</span>
          </div>

          <div className="flex flex-col gap-1">
            <h6 className="text-gray-500">Note</h6>
            <span className="text-lg">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil
              soluta culpa, fugit aut, ea corrupti rem molestias dolor dolorem
              odit voluptate, facilis fuga reprehenderit commodi perspiciatis
              optio aperiam recusandae aliquam.
            </span>
          </div>
        </div>
      </div>

      <div className="flex items-center justify-between">
        <button
          onClick={() => setItemMode("add")}
          className="rounded-lg px-5 py-3"
        >
          Back
        </button>

        <button
          onClick={() => setItemMode("default")}
          className="rounded-lg bg-[#f9a109] px-5 py-3 text-white"
        >
          Save
        </button>
      </div>
    </div>
  );
};

Index.tsx

import { useState } from "react";
import { GetServerSideProps, type NextPage } from "next";
import Head from "next/head";
// import Link from "next/link";
// import { signIn, signOut, useSession } from "next-auth/react";

import { type Data, PrismaClient } from "@prisma/client";

import { Dancing_Script } from "@next/font/google";

import { IoAddOutline } from "react-icons/io5";
import { AiOutlineSearch } from "react-icons/ai";
import Overlay from "../components/common/Feedback/Overlay";

import { trpc } from "../utils/trpc";

type HomePageProps = {
  datas: Data[];
};

const dancingScript = Dancing_Script({
  weight: "700",
  subsets: ["latin"],
});

const Home: NextPage<HomePageProps> = ({ datas }) => {
  const [filteringList, setFilteringList] = useState(datas);
  const [search, setSearch] = useState("");
  const mutation = trpc.selectedData.addItemToShopingList.useMutation();

  const searchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value);
    const filteredList = datas.map((list) => {
      return {
        ...list,
        items: list.items.filter((item) =>
          item.toLowerCase().includes(e.target.value.toLowerCase())
        ),
      };
    });
    setFilteringList(filteredList);
  };

  const addItemToShopingList = async (
    item: string,
    name: string,
    id: string
  ) => {
    if (mutation.error) {
      return alert("Something went wrong");
    }
    mutation.mutate({
      id,
      name,
      item,
    });
  };

  return (
    <>
      <Head>
        <title>Shoppingify | Items</title>
        <meta name="description" content="Generated by create-t3-app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Overlay isShowing={false} />

      <div className="flex min-h-full flex-1 flex-col gap-12 bg-[#fafafe] px-16 py-8">
        <div className="flex w-full items-center gap-40">
          <h1 className="text-4xl">
            <span className={`${dancingScript.className} text-[#f9a109]`}>
              Shoppingify
            </span>{" "}
            allows you take your shopping list wherever you go
          </h1>

          <div className="relative flex items-start rounded-lg shadow-lg">
            <AiOutlineSearch className="absolute top-4 left-3" size="1.5rem" />
            <input
              className="rounded-lg px-12 py-4 outline-none"
              onChange={searchHandler}
              value={search}
              type="search"
              name="search"
              placeholder="Search Items"
              id="search"
            />
          </div>
        </div>

        <div className="flex max-h-[600px] flex-col gap-10 overflow-y-auto py-2">
          {filteringList?.map((list) => (
            <div key={list?.id} className="flex flex-col gap-7">
              <h3 className="text-2xl">{list?.name}</h3>
              <div className="flex flex-wrap items-center justify-center gap-5 space-x-3">
                {list?.items.map((item: string, idx: number) => (
                  <div
                    className="flex items-center justify-center gap-3 rounded-md px-4 py-2 shadow-md"
                    key={idx}
                  >
                    {item}{" "}
                    <button
                      onClick={() =>
                        addItemToShopingList(item, list?.name, list?.id)
                      }
                      title="add-item"
                    >
                      <IoAddOutline size="1.3rem" />
                    </button>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

export default Home;

export const getServerSideProps = async () => {
  const prisma = new PrismaClient();
  const datas = await prisma.data.findMany();

  return { props: { datas } };
};

型
所以我的问题是，在从Index.tsx文件更新数据后，如何更新布局的侧边栏数据。

reactjs

1条答案

按热度按时间
jjjwad0x

jjjwad0x1#

一种解决方案是更新Home组件，使其包含一个状态，该状态表示datas属性和用户在使用购物清单时添加的任何数据。filteringList状态可以使用此“波动”状态，而不是使用传入的属性。额外的状态如下所示：

  • 注意 *：在任何使用datas属性的地方，都应该使用fluctuatingList。
const Home: NextPage<HomePageProps> = ({ datas }) => {
  const [fluctuatingList, setFluctuatingList] = useState(datas);
  // You can still set the filtered list to initially be set with `datas`
  const [filteringList, setFilteringList] = useState(datas);
  const [search, setSearch] = useState("");
  const mutation = trpc.selectedData.addItemToShopingList.useMutation();
...

然后在更新搜索时，使用fluxuatingListMap：

const searchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value);
    // Check the line below
    const filteredList = fluctuatingList.map((list) => {
      return {
        ...list,
        items: list.items.filter((item) =>
          item.toLowerCase().includes(e.target.value.toLowerCase())
        ),
      };
    });
    setFilteringList(filteredList);
  };

现在，老实说，我没有花时间来消化您的代码片段以给予一个可用的解决方案，但猜测@prisma/client的Data类型是什么，我将假设它看起来像一个具有以下函数中三个参数的对象：

const addItemToShopingList = async (
    item: string,
    name: string,
    id: string
  ) => {
    if (mutation.error) {
      return alert("Something went wrong");
    }

    // Pulling this into a `const` for reuse
    const newData = {
      id,
      name,
      item,
    };

    // Here is where we mutate the data, I am guessing through some API call
    // We also want to set the fluctuating state here:
    setFluctuatingList((prevList) => ([ ...Array.from(prevList), newData ]));
    mutation.mutate(newData);
  };

型
如果你认为这是一个好答案，请竖起大拇指！

赞(0）分享  回复(0）举报  2022-12-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com