Состояние совместного использования элементов

Question

Я пытаюсь написать младший проект на JS, используя React (ничего захватывающего, только чтобы получить некоторый опыт).Следовательно, я вроде как новенький ... Я направляюсь к этому универсальному «приложению заметок».

Но при извлечении заметок с сервера и их рендеринге (с использованием элемента Card @ material-ui) возникла проблема: общее состояние всех заметок: нажатие на иконку «развернуть» приводит к расширению всех карточек (НО показывает только данные в одной нажатой).Повторное нажатие (на нажатие ранее) закрывает их все

Я впервые использую хук useState и @ material-ui.У меня есть НЕКОТОРЫЙ опыт работы с компонентами реагирования, как классными, так и без состояния.Но раньше с этим не сталкивался.

Это компонент Notes, который отображает столько элементов Note, сколько сохранено.

  parseNotes = (data) => {
    const toBeNotes = [];
    for (let key in data) {
      toBeNotes.push(data[key]);
    }
    const aux = toBeNotes.map((note, i) => {
      return (
        <Note key={i} {...note} />
      )
    })
    this.setState({ notes: aux });
  }

  render() {
    return (
      <div className="notes">{...this.state.notes}</div>
    )

}

И это коддля компонента Note:

const [open, setOpen] = useState(false);
  function openHandler() {
    setOpen(!open);
  }
  return (
    <Card raised className="note">
      <CardHeader
        title={props.title}
        subheader={`Due at: ${props.date}, at ${props.time}`}
      />
      <CardActions>
        <IconButton>
          <ExpandMoreIcon
            onClick={openHandler}
          />
        </IconButton>
      </CardActions>
      <Collapse in={open}>
        <CardContent>
         <h6>{props.body}</h6>
        </CardContent>
      </Collapse>
    </Card>
  )

Любая помощь будет высоко оценена!

Answer 1

Каждый компонент работает независимо от другого компонента.Таким образом, 2 примечания «открытое» состояние отличается и внутренне связано только с их примечанием.Таким образом, это не повлияет на другие заметки.Причина ошибки должна быть другой.Вы должны предоставить свой полный код для этих 2 файлов.

Тем не менее, для подтверждения, я написал код, в котором я делаю компонент ColoredButton, который изначально показывает красный цвет, и когда я нажимаю на него, он переключается на черный, снова я нажимаю на него, он переключается накрасный и т. д. Затем я использую этот компонент 10 раз в своем компоненте приложения (непосредственно отображается в index.js) и замечаю, что каждый ColoredComponent ведет себя независимо от другого компонента.

ColorButton.js

const ColoredButton = props => {
  const redHex = "#f00";
  const blackHex = "#000";
  const [color, setColor] = useState(redHex);
  return (
    <React.Fragment>
      <button
        onClick={event => {
          event.preventDefault();
          if (color === redHex) {
            setColor(blackHex);
          } else {
            setColor(redHex);
          }
        }}
        style={{ color: `${color}` }}
      >
        Toggle My Color
      </button>
    </React.Fragment>
  );
};

export default ColoredButton;

index.js

import React from "react";
import ReactDOM from "react-dom";

import ColoredButton from "./ColoredButton";

import "./styles.css";

function App() {
  let buttons10 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  return (
    <React.Fragment>
      {buttons10.map(buttonNo => (
        <ColoredButton key={buttonNo} />
      ))}
    </React.Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вы можете попробовать этот код на CodeSandbox .

Если этот пример кода не поможет вам решить вашу проблему, пожалуйста,предоставьте полный код этих 2 файлов.

Answer 2

Что произойдет, если вы измените свой Note на что-то вроде этого:

export const Note = ({date, time, title, body}) => {
  const [open, setOpen] = useState(false);
  return (
    <Card raised className="note">
      <CardHeader
        title={title}
        subheader={`Due at: ${date}, at ${time}`}
      />
      <CardActions>
        <IconButton>
          <ExpandMoreIcon
            onClick={() => setOpen(!open)}
          />
        </IconButton>
      </CardActions>
      <Collapse in={open}>
        <CardContent>
         <h6>{body}</h6>
        </CardContent>
      </Collapse>
    </Card>
  )
};

(Боковая панель: вы можете передать open в ExpandMoreIcon, чтобы изменить значок для отображения отраженного действия)

В этомВ сценарии open должно относиться только к Card, с которым вы работаете, и не будет / не должно влиять на другие Note с вашего дисплея.Если вам нужно обрабатывать открытие / закрытие по одному, вам придется передать метод из более высокого компонента, который бы отслеживал состояние открытия / закрытия каждого из них, возможно, на основе его индекса (который, BTW, вы никогда не должны использоватькак ваш key. Просто дайте каждому Note свой уникальный идентификатор и используйте его как свой key.)