时间戳

首页 > 解决方案 > 用于 React 中的对象的 useState

javascript - 用于 React 中的对象的 useState

问题描述

我在使用钩子 useState 来处理 React 中的对象时遇到了困难。我有一个按钮，我希望重用它来清理我的代码。

我可以为按钮的每个实例使用一个新函数，但我认为还有另一种方法。也许我可以重组我的变量，我对此有些陌生，所以我不确定最好的方法。

import React, { useState } from "react";
import ProjectVB from "./ProjectVB";
import ProjectBB from "./ProjectBB";
import Up from "../icons/Up.svg";
import Down from "../icons/Down.svg";
import exampleVB from "../icons/projectVB.JPG";
import exampleBB from "../icons/projectBB.jpg";

const Projects = () => {
  const [moreInfo, setMoreInfo] = useState({
    SC: true,
    VF: true,
    VB: true,
    BB: true,
  });
  const [aboutButton, setAboutButton] = useState({
    BB: Down,
    VB: Down,
    SC: Down,
    VF: Down,
  });
  const [project, setProject] = useState({
    SC: false,
    VF: false,
    VB: false,
    BB: false,
  });

  const ContinueReadingFunction = value => {
    setMoreInfo.value(!moreInfo.value)
    if (moreInfo.value === true) {
      setProject.value(!project.value);
      setAboutButton.value(Up);
    } else {
      aboutButton.value = Down;
      project.value = false;
    }
  };


return (
<div className="imageContainer">
          <div className="buttonBox">
            <button
              className="aboutButton"
              onClick={() => ContinueReadingFunction("BB")}
            >
              <img
                src={aboutButton.BB}
                className="logo"
                alt="More or less information."
              />
            </button>
          </div>
          <div className="exampleImage">
            <img
              src={exampleBB}
              className="exampleImageImage"
              alt="screenshot of the project"
            />
          </div>
        </div>
        {project.BB && <ProjectBB />}
      </div>
      <div className="projectContainer">
        <h3>Vegan Berlin</h3>
        <div className="imageContainer">
          <div className="buttonBox">
            <button className="aboutButton" onClick={ContinueReadingFunction}>
              <img
                src={aboutButton.VB}
                className="logo"
                alt="More or less information."
              />
            </button>
          </div>
          <div className="exampleImage">
            <img
              src={exampleVB}
              className="exampleImageImage"
              alt="screenshot of the project"
            />
          </div>
        </div>
        {project.VB && <ProjectVB />}
      </div>
  );
};
export default Projects;

我可以使用一堆单独的函数来实现结果，但我正在尝试重构我的代码以学习新的钩子

标签： javascriptreactjsreact-hooks

解决方案

您的继续阅读功能似乎存在一些问题

useState setter 函数只是将您传递给它们的任何内容设置为新状态，因此您需要再次传递整个对象。看起来您正在尝试对对象本身中的值进行子集化，为此您需要使用 [] 表示法。

尝试这个：

const ContinueReadingFunction = value => {
  const newMoreInfo = { ...moreInfo }; // copy moreInfo to avoid mutating state
  newMoreInfo[value] = !moreInfo[value];
  setMoreInfo(newMoreInfo);

  const newAboutButton = { ...aboutButton };
  const newProject = { ...project };

  if (newMoreInfo[value]) { // no need to use equality check for truthy values
    newProject[value] = !project[value];
    newAboutButton[value] = Up;
  } else {
    newProject[value] = false;
    newAboutButton[value] = Down;
  }

  setProject(newProject);
  setAboutButton(newAboutButton);
};

推荐阅读