Javascript 在return语句中有条件地呈现数组中的数组？

我尝试过其他用户概述的许多方法，但没有成功。我不确定我做错了什么

本质上，我引用的是idNumbers，一个布尔数组（初始化为false），每个索引对应一个“file”对象的不同实例。我想访问这个数组，并使用每个索引中的布尔值来确定是否应该呈现文件中的内容。我的onClick（）调用一个函数，该函数在传递给它的任何索引处切换布尔值

现在，我可以很好地显示按钮，但是不管怎样，内容都会显示出来。单击按钮什么也不做。我没有使用更简单的方法，因为我不知道有多少文件对象，所以它必须是动态的

return语句位于Results组件（从Content组件提取）内部：

我的切换文件功能：

const toggleFile = (id) => {
      content.idNumbers[id] = !content.idNumbers[id];
};

我已经搞了好几个小时了。请让我知道我可以改变什么，这样我就可以让这个工作。我知道这并不是一个优雅的解决方案，但我只是想让基本的工作。多谢各位

编辑：我想我应该澄清一下…{file.content}本身就是一个数组

EDIT2:文件对象，在.map（文件，索引）中创建并添加到文件数组中：

fileObj = { 
    title: {file.title},
    id: index, 
    content: [] 
};

---

您需要触发重新渲染。这是通过调用

setState（）

或

This.forceUpdate（）

完成的

我不知道你的内容来自哪里（即道具、州或其他地方），但如果它是道具，你不应该直接修改它。相反，您应该通过回调通知父组件发生了什么事情（并让父组件在其源位置修改数据）。这称为受控部件。另一个选项是通过state在内部处理它。这是一个不受控制的部件。在表单控件中可以看到很多

setState

要求该状态实际更改。您可以通过增加计数器或实际更改内部数据来实现这一点。如果您不在内部存储数据，我发现

setState

+计数器很烦人，只能依赖

forceUpdate

如果您使用的是React钩子，我相信您必须使用

setState

和计数器。除非它看起来像

let [counter, setCounter] = useState(0);

// Inside click method
setCounter(counter + 1);

---

不，文件实际上是一个对象（请参见编辑），ID是简单的0、1、2、3。。。因为文件对象在一个数组中。更大的程序有点曲折和混乱，所以不幸的是，我不能把它全部包括在这里。但它工作正常，我知道索引和预期的一样。是什么导致组件重新渲染？我甚至不知道重新渲染是一件事（我在这方面非常、非常、非常新）。非常感谢。现在，虽然，我不确定我到底将如何拥有一个与我设置的格式相对应的可变数量的状态…尽管，如果它不重新呈现，这不应该意味着没有显示任何内容（因为数组初始化为all false）。。。？看来还是有东西坏了。能在codesandbox上做个样本吗？我希望能。在我的问题中，我修改了代码，因为我与某些功能签订了合同，但我不允许共享代码。所以我认为这是不可能的，对不起，谢谢！我想我明白了。如果我一次只打开一个可折叠文件，那么我可以有一个setState，它反映我想要打开的表单信息的id。我还将研究这个.forceUpdate（）。

fileObj = { 
    title: {file.title},
    id: index, 
    content: [] 
};

let [counter, setCounter] = useState(0);

// Inside click method
setCounter(counter + 1);