Ninety9Balloons's questions

我正在做这个前端导师挑战，大部分功能都已实现。我可以根据数据的isActive属性进行过滤，根据它们是否处于活动状态来显示正确的项目。但我搞不清楚如何更新单个项目的isActive状态，以及如何在切换时重新渲染应用，以便将项目移动到正确的过滤器中。

以下是代码App.jsx：

function App() {
  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState(data);
  const [activeFilter, setActiveFilter] = useState("All");

  // Fetch and set the data.
  useEffect(() => {
    fetch("../data.json")
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error("error", error));
  }, []);

  // Filter the data
  useEffect(() => {
    if (activeFilter === "All") {
      setFilteredData(data);
    } else if (activeFilter === "Active") {
      setFilteredData(data.filter((item) => item.isActive === true));
    } else {
      setFilteredData(data.filter((item) => item.isActive === false));
    }
  }, [activeFilter, data]);

  return (
    <div className="w-full h-full bg-linear-to-b from-[#040918] to-[#091540] py-6 px-3 flex flex-col text-white">
      {/* Header */}
      <Header />

      {/* Options */}
      <Options activeFilter={activeFilter} setActiveFilter={setActiveFilter} />

      {/* Cards */}
      {filteredData &&
        filteredData.map((item) => (
          <Card
            logo={item.logo}
            name={item.name}
            description={item.description}
            isActive={item.isActive}
            key={item.name}
            setFilteredData={setFilteredData}
            filteredData={filteredData}
          />
        ))}
    </div>
  );
}

这是Card.jsx带有拨动开关的：

const Card = ({
  logo,
  name,
  description,
  isActive,
  filteredData,
  setFilteredData,
}) => {
  const [activeState, setActiveState] = useState(isActive);

  function handleClick() {
    setActiveState(!activeState);
  }

  return (
    <div className="bg-neutral-700 p-4 rounded-xl border border-neutral-600 mt-4">
      <div className="flex items-start gap-4">
        {/* Logo */}
        <img src={logo} alt="Extension Image" />

        {/* Name and Description */}
        <div className="flex flex-col gap-2 mb-8">
          <h2 className="font-semibold text-xl">{name}</h2>
          <p className="text-sm font-light">{description}</p>
        </div>
      </div>

      {/* Remove Button */}
      <div className="flex justify-between items-center">
        <div className="border border-neutral-600 rounded-full px-3 py-1 flex items-center justify-center">
          <button>Remove</button>
        </div>

        {/* Is Active Toggle */}
        <div className="flex items-center justify-center">
          <label
            htmlFor={`${name}Toggle`}
            className="flex items-center cursor-pointer "
          >
            <div className="relative">
              <input
                id={`${name}Toggle`}
                type="checkbox"
                className="sr-only"
                onClick={handleClick}
              />
              <div
                className={`flex items-center ${
                  activeState ? "bg-red-400 " : "bg-gray-600 "
                } w-11 h-6 rounded-full transition-all px-[2px]`}
              >
                <div
                  className={`bg-white w-5 h-5 rounded-full ${
                    activeState ? "translate-x-5" : "translate-x-0"
                  } transition-all`}
                ></div>
              </div>
            </div>
          </label>
        </div>
      </div>
    </div>
  );
};

我试图在卡片handleclick函数里找到同样的方法，将特定卡片的名称与物品的名称匹配，filteredData然后……翻转它的isActive状态？我不知道该怎么做，我甚至不确定这是不是最好的方法。

我在使用 Tailwind 及其过渡效果时遇到了一个奇怪的问题。我有一个父 div，其背景颜色会根据 activeState 的变化而变化。这个 div 有一个过渡效果，效果很好。

在这个 div 中，我有一个“点”，它会根据它的 activeState 在左侧和右侧之间切换。这个过渡效果不起作用。

我不确定为什么第二个 div 的过渡不起作用。我试过把代码改成绝对 div，用 left-1 和 right-1 来切换，但还是不行。

<div
  className={`flex items-center ${
    activeState ? "bg-red-400 " : "bg-gray-600 "
  } w-11 h-6 rounded-full transition-all px-[2px]`}
>
  <div
    className={`bg-white w-5 h-5 rounded-full ${
      activeState ? "ml-auto" : "mr-auto"
    } transition-all`}
  ></div>
</div>

所以这是一个社交媒体评论，有两个家长评论，还有comment#2两个孩子评论。

[
{
    "id": 1,
    "content": "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.",
    "createdAt": "1 month ago",
    "score": 12,
    "user": {
        "image": {
            "png": "./images/avatars/image-amyrobson.png",
            "webp": "./images/avatars/image-amyrobson.webp"
        },
        "username": "amyrobson"
    },
    "replies": []
},
{
    "id": 2,
    "content": "Woah, your project looks awesome! How long have you been coding for? I'm still new, but think I want to dive into React as well soon. Perhaps you can give me an insight on where I can learn React? Thanks!",
    "createdAt": "2 weeks ago",
    "score": 5,
    "user": {
        "image": {
            "png": "./images/avatars/image-maxblagun.png",
            "webp": "./images/avatars/image-maxblagun.webp"
        },
        "username": "maxblagun"
    },
    "replies": [
        {
            "id": 3,
            "content": "If you're still new, I'd recommend focusing on the fundamentals of HTML, CSS, and JS before considering React. It's very tempting to jump ahead but lay a solid foundation first.",
            "createdAt": "1 week ago",
            "score": 4,
            "replyingTo": "maxblagun",
            "user": {
                "image": {
                    "png": "./images/avatars/image-ramsesmiron.png",
                    "webp": "./images/avatars/image-ramsesmiron.webp"
                },
                "username": "ramsesmiron"
            }
        },
        {
            "id": 4,
            "content": "I couldn't agree more with this. Everything moves so fast and it always seems like everyone knows the newest library/framework. But the fundamentals are what stay constant.",
            "createdAt": "2 days ago",
            "score": 2,
            "replyingTo": "ramsesmiron",
            "user": {
                "image": {
                    "png": "./images/avatars/image-juliusomo.png",
                    "webp": "./images/avatars/image-juliusomo.webp"
                },
                "username": "juliusomo"
            }
        }
    ]
}

]

我试图弄清楚如何删除子评论并在相同的父>子设置中返回数组。

现在，在单击评论上的删除按钮时，我会运行一个函数，该函数循环访问父评论，以过滤掉与所单击的评论 ID 匹配的任何父评论

    let filteredComments = [];

function handleClick(e) {
    setLoading(true);
    for (let i = 0; i < comments.length; i++) {
        if (comments[i].id !== Number(e.target.id)) {
            filteredComments = [...filteredComments, comments[i]];
        }
    }

    console.log(filteredComments);
    // setComments(...comments, filteredComments);
    setTimeout(() => {
        setLoading(false);
    }, 1000);
}

这会从上面的方式返回与原始data.json注释相同的数组。我试图删除的评论是id4，是一个子评论。我已经尝试了十几种不同的方法来循环子评论，但我不知道如何只返回与所选评论 id 不匹配的子评论并以相同的方式返回对象parent>child（在某一时刻我得到了它返回一个数组，其中子注释位于父注释旁边，这会弄乱将注释映射到页面）。

我尝试的最后一件事是循环遍历父注释，将它们推送到过滤数组，然后循环遍历过滤数组中任何注释的子注释。

    let filteredComments = [];

function handleClick(e) {
    setLoading(true);
    for (let i = 0; i < comments.length; i++) {
        if (comments[i].id !== Number(e.target.id)) {
            filteredComments = [...filteredComments, comments[i]];
        }
    }


    if (comments[i].replies.length !== 0) {
        for (let k = 0; k < comments[i].replies.length; k++) {
            if (comments[i].replies[k].id !== Number(e.target.id)) {
                filteredComments = [
                    ...filteredComments,
                    comments[i].replies[k],
                ];
            }
        }
    }

    console.log(filteredComments);
    // setComments(...comments, filteredComments);
    setTimeout(() => {
        setLoading(false);
    }, 1000);
}

我可以成功地将输入的值和检查状态添加到状态数组中，因此当我单击输入时，值和检查状态会被推送到数组中，当我再次单击它时，值和检查状态会从从数组中取出特定输入。

我陷入困境的是，如果我进入下一步/组件，然后返回，我试图根据输入是否已在状态数组中将其设置为检查状态。

有三个输入，它们默认为未选中。我将单击 #1 和 #3，单击下一步按钮，转到下一步，单击后退按钮，现在所有三个输入都恢复为未选中状态，即使状态中仍然有 #1 和 #3。我希望 #1 和 #3 显示为选中状态。

const [addon, setAddon] = useState([]); //This is in another file

function AddOns({ addon, setAddon }) {
    const checkHandler = (e) => {
        if (e.target.checked === true) {
            setAddon([
                ...addon,
                { value: e.target.value, checked: e.target.checked },
            ]);
        }

        if (e.target.checked === false) {
            const nextAddon = addon.filter((a) => a.value !== e.target.value);
            setAddon(nextAddon);
        }
    };
                <Input
                    value="Online service"
                    dataAmount="+$1/mo"
                    dataNumber="1"
                    // checked={}
                    addonDetail="Access to multiplayer games"
                    onClick={(e) => checkHandler(e)}
                />
                {/* <!-- Add on --> */}
                <Input
                    value="Larger storage"
                    dataAmount="+$2/mo"
                    dataNumber="2"
                    // checked={}
                    addonDetail="Extra 1TB of cloud save"
                    onClick={(e) => checkHandler(e)}
                />
                {/* <!-- Add on --> */}
                <Input
                    value="Customizable profile"
                    dataAmount="+$2/mo"
                    dataNumber="2"
                    // checked={}
                    addonDetail=" Custome theme on your profile"
                    onClick={(e) => checkHandler(e)}
                />

我想也许循环遍历状态数组以将数组值与输入值匹配，并在匹配时将检查的状态拉出来可能会起作用，但我在那里没有成功。我还设法将检查属性设置为状态数组中是否有检查状态为 true，但它会将所有三个输入设置为检查而不是特定输入。

我将数据从孩子 1 发送到父母，然后发送到孩子 2。现在我需要发送三件事；日、月和年的值。只获取一个值就可以了，但是当我尝试获取所有三个值时，我得到了一个 TypeError 。

家长：

import Results from "./Results";
import TopForm from "./TopForm";
import { useState } from "react";

function Hero() {
    const [dayValue, setDayValue] = useState("--");
    const [monthValue, setMonthValue] = useState("--");
    const [yearValue, setYearValue] = useState("--");

    return (
        <div className="font-poppins bg-light-grey p-2 h-screen w-screen">
            {/* Main Container */}
            <div className="container bg-white mt-16 max-w-[95%] md:max-w-2xl mx-auto p-10 rounded-xl rounded-br-3xl">
                <TopForm
                    // This does not work, Uncaught TypeError: callback is not a function
                    // callback={[setDayValue, setMonthValue, setYearValue]}

                    // This does work but only gets the dayValue
                    callback={setDayValue}
                />
                <Results
                    dayValue={dayValue}
                    monthValue={monthValue}
                    yearValue={yearValue}
                />
            </div>
        </div>
);
}

export default Hero;

Child 1（TopForm获取数据）

import { useState } from "react";

function TopForm({ callback }) {
const [error, setError] = useState(false);

const [dayText, setDayText] = useState("");
const [monthText, setMonthText] = useState("");
const [yearText, setYearText] = useState("");

const handleSubmit = (event) => {
    event.preventDefault();

    setDayText("");
    setMonthText("");
    setYearText("");
};

return (
    // Inputs Container
    <form onSubmit={handleSubmit}>
        {/* Upper Form */}
        <div className="container flex justify-center gap-4 md:max-w-lg">
            <div className="container w-1/3 flex flex-col">
                <label
                    htmlFor="day"
                    className={`if ${error} ? "text-red-400 text-sm mb-1 uppercase tracking-wide" : "text-smokey-grey"`}
                    id="day-label"
                >
                    Day
                </label>
                <input
                    type="number"
                    name="day"
                    id="day"
                    required
                    className="border-solid border-2 border-light-grey rounded-md p-3 text-lg outline-none focus:border-purple"
                    onChange={(event) => setDayText(event.target.value)}
                    value={dayText}
                />
                <div
                    id="day-error"
                    className="hidden text-xs text-red-400 mt-2"
                >
                    Must be a valid date
                </div>
            </div>

            <div className="container w-1/3 flex flex-col">
                <label
                    htmlFor="month"
                    id="month-label"
                    className="text-smokey-grey text-sm mb-1 uppercase tracking-wide"
                >
                    Month
                </label>
                <input
                    type="number"
                    name="month"
                    id="month"
                    required
                    className="border-solid border-2 border-light-grey rounded-md p-3 text-lg outline-none focus:border-purple"
                    onChange={(event) => setMonthText(event.target.value)}
                    value={monthText}
                />
                <div
                    id="month-error"
                    className="hidden text-xs text-red-400 mt-2"
                >
                    Must be a valid date
                </div>
            </div>

            <div className="container w-1/3 flex flex-col">
                <label
                    htmlFor="year"
                    id="year-label"
                    className="text-smokey-grey text-sm mb-1 uppercase tracking-wide"
                >
                    Year
                </label>
                <input
                    type="number"
                    name="year"
                    id="year"
                    required
                    className="border-solid border-2 border-light-grey rounded-md p-3 text-lg outline-none focus:border-purple"
                    onChange={(event) => setYearText(event.target.value)}
                    value={yearText}
                />
                <div
                    id="year-error"
                    className="hidden text-xs text-red-400 mt-2"
                >
                    Must be a valid date
                </div>
            </div>
        </div>

        {/* Line Arrow Container */}
        <div className="container my-20 flex justify-center relative">
            <hr className="border-light-grey w-full" />
            <button
                id="button"
                className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple w-16 h-16 rounded-full flex items-center justify-center hover:scale-125 transition-all"
                type="submit"
                onClick={() => callback(dayText, monthText, yearText)}
            >
                <img
                    src="/images/icon-arrow.svg"
                    alt="arrow"
                    className="w-6"
                />
            </button>
        </div>
    </form>
);
}

export default TopForm;

Child 2（结果，显示从 TopForm 收集的数据）

function Results({ dayValue, monthValue, yearValue }) {


return (
    // Results Container
    <div id="results-container" className="container">
        {/* Individual Container */}
        <div className="container flex">
            <span
                id="results-year"
                className="text-5xl italic font-bold text-purple mr-2"
            >
                {yearValue}
            </span>
            <p className="text-5xl italic font-bold mr-2">years</p>
        </div>

        <div className="container flex">
            <span
                id="results-month"
                className="text-5xl italic font-bold text-purple mr-2"
            >
                {monthValue}
            </span>
            <p className="text-5xl italic font-bold mr-2">months</p>
        </div>

        <div className="container flex">
            <span
                id="results-day"
                className="text-5xl italic font-bold text-purple mr-2"
            >
                {dayValue}
            </span>
            <p className="text-5xl italic font-bold mr-2">days</p>
        </div>
    </div>
);
}

export default Results;

我不断收到此错误：未捕获的类型错误：无法设置 null 的属性（设置“innerHTML”）

或：未捕获的类型错误：无法设置 null 的属性（设置“textContent”）

当模式打开后尝试更改锚标记的文本时。

这是模态：

 <!-- Success Modal -->
    <div class="modal-container" id="modal">
        <div class="modal-main">
            <img
                src="./assets/images/icon-success.svg"
                alt="success image"
            />
            <h1 class="modal-header">Thanks for subscribing!</h1>
            <p>
                A confirmation email has been sent to
                <a href="#" id="modal-email">test</a>. Please open it and
                click the button inside to confirm your subscription.
               
            </p>
        </div>
        <button id="dismiss-btn">Dismiss message</button>
    </div>

表格：

   <form id="form">
            <label for="email">Email address</label>
            <input
                type="email"
                name="email"
                id="email"
                placeholder="[email protected]"
            />
            <button id="button">Subscribe to monthly newsletter</button>
        </form>

和 JavaScript：

const form = document.getElementById("form");
const btn = document.getElementById("button");
const dismissBtn = document.getElementById("dismiss-btn");
const modal = document.getElementById("modal");
const modelEmail = document.getElementById("model-email");

form.addEventListener("submit", function (e) {
    e.preventDefault();
    modal.style.display = "block";

    let formData = new FormData(this);
    let inputValue = formData.get("email");

    console.log(inputValue);
    modelEmail.textContent = "example";
});

dismissBtn.onclick = function () {
    modal.style.display = "none";
};

当控制台记录 inputValue 时，正确的值出现在控制台中，但是当尝试更改模式中锚标记的 textContent 时，我不断收到错误。无论我使用 inputValue 还是[在本例中]“example”字符串，我都会不断收到 null 错误。