时间戳

首页 > 解决方案 > 元素共享状态

javascript - 元素共享状态

问题描述

我正在尝试使用 React 用 JS 编写一个初级项目（没什么令人叹为观止的，只是为了获得一些经验）。因此 - 我有点新鲜......我正在前往那个通用的“笔记应用程序”。

但是从服务器获取笔记并渲染它们（使用@material-ui Card元素）面临一个问题：所有笔记共享状态：单击一个人的“展开”图标会导致所有卡片展开（但仅显示单击的数据）。再次单击（在之前单击的那个上）将关闭所有这些

这是我第一次使用“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>
  )

任何帮助将不胜感激！

标签： javascriptreactjsmaterial-ui

解决方案

如果您将您的更改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您显示中的其他 s。如果您需要一次处理打开/关闭一个，则必须从更高的组件向下传递一个方法，该方法将跟踪每个组件的打开/关闭状态，可能基于它的索引（顺便说一句，您永远不应该使用作为你的key。只需给每个Note它自己的唯一标识符并将其用作你的key。）

推荐阅读