useState для объекта в React - PullRequest
Новая
       2

useState для объекта в React

0 голосов
/ 20 июня 2019

У меня возникли трудности с использованием хука 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;

Я могу использовать несколько отдельных функций для достижения результатов, но я пытаюсь реорганизовать свой код, чтобы изучить новые хуки

1 Ответ

0 голосов
/ 20 июня 2019

Похоже, что в вашей функции продолжения чтения есть пара проблем

Функции установщика useState просто устанавливают, что вы передаете, как новое состояние, поэтому вам нужно снова передать весь объект.также выглядит так, как будто вы пытаетесь установить подмножества значений в самих объектах, для этого вам нужно использовать нотацию [].

Попробуйте это: 

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);
};
...