时间戳

首页 > 解决方案 > 根据来自 REST 调用的输入折叠元素

reactjs - 根据来自 REST 调用的输入折叠元素

问题描述

我有一个返回一组数据的 REST 服务。我想根据服务中的数据切换一些元素。但正如您在此示例中看到的那样：

https://codesandbox.io/s/collapse-gmqpp?fontsize=14&hidenavigation=1&theme=dark

我在切换不起作用时所做的更改。我最好的选择是因为 media.toggle = !media.toggle; 是不是解释为一个钩子？如何向我的数据添加一个属性，以便我可以在渲染函数中使用它进行切换等？还是我应该完全不同？

import React, { useState, useEffect } from "react";

const CrawlJobs = () => {
  const [mediaList, setMediaList] = useState([]);

  useEffect(() => {
    const fetchMediaData = async () => {
      try {
        setMediaList([{ id: 1, name: "Facebook" }, { id: 2, name: "Twitter" }]);
      } catch (error) {}
    };
    fetchMediaData();
  }, []);

  const toggle = media => {
    media.toggle = !media.toggle;
  };

  return (
    <div>
      {mediaList.map(media => (
        <div>
          <div onClick={() => toggle(media)}>Show</div>
          {media.toggle && <h1>Toggled context</h1>}
        </div>
      ))}
    </div>
  );
};

export default CrawlJobs;

标签： reactjs

解决方案

使用时useState，只有使用 setter 函数（在您的情况下为 setMediaList）的更新才会切换重新渲染。因此，在您的切换功能中，您需要找到您想要切换的媒体项目，更新它，并使用 setMediaList 保存它。

为此，您需要能够唯一标识您的媒体项目。您可以media.id用于此目的。

{mediaList.map(media => (
  <div key={media.id}>
    <div onClick={() => toggle(media.id)}>Show</div>
    {media.toggle && <h1>Toggled context</h1>}
  </div>
))}

你的切换功能看起来像这样

const toggle = mediaId => {
    setMediaList(
      mediaList.map(media => {
        return media.id === mediaId
          ? { ...media, toggle: !media.toggle }
          : media;
      })
    );
  };

这是一个更新的代码框。

还要注意控制台中的反应错误，map()函数中的第一个 jsx 项应该有一个唯一可识别的key道具。

推荐阅读