Reactjs 根据REST调用的输入折叠元素

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

切换不起作用时所做的更改。我的最佳选择是因为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;

import React，{useState，useffect}来自“React”；
常量爬网作业=（）=>{
const[mediaList，setMediaList]=useState（[]）；
useffect（（）=>{
const fetchMediaData=async（）=>{
试一试{
setMediaList（[{id:1，名称：“Facebook”}，{id:2，名称：“Twitter”}]）；
}捕获（错误）{}
};
fetchMediaData（）；
}, []);
常量切换=媒体=>{
media.toggle=！media.toggle；
};
返回(
{mediaList.map（媒体=>(
切换（媒体）}>显示
{media.toggle&&Toggled context}
))}
);
};
导出默认工作；

使用

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

这里有一个更新的

---

还要注意控制台中的react错误，

map（）

函数中的第一个jsx项应具有唯一可识别的

键

属性。

当使用

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

这里有一个更新的

---

还要注意控制台中的react错误，

map（）

函数中的第一个jsx项应该有一个唯一可识别的

键

道具。

完美！非常感谢，非常感谢。工作时，只需编辑绑定值即可。这样做是正常的，还是我使用了错误的方法。我总是觉得反应起来就那么容易。似乎有很多工作要做的thwo方式绑定部分？也可能只是习惯它的问题。@ThomassegatoReact与Angular相比具有陡峭的学习曲线，但在我看来是值得的。在这种情况下，我建议创建一个较小的组件来管理自己的切换，就像更新的Perfect！非常感谢，非常感谢。工作时，只需编辑绑定值即可。这样做是正常的，还是我使用了错误的方法。我总是觉得反应起来就那么容易。似乎有很多工作要做的thwo方式绑定部分？也可能只是习惯它的问题。@ThomassegatoReact与Angular相比具有陡峭的学习曲线，但在我看来是值得的。在这种情况下，我建议创建一个较小的组件来管理自己的切换，就像在更新的