为什么更改后列表不显示并且我需要的功能不起作用？如何解决？

Question

我有一个数组所在的对象，使用 fetch 方法我得到一个数据对象，然后我在页面上有一个工厂工人列表 + 一个过滤器。
这是我的应用程序代码：
https://codesandbox.io/s/sad-bas-ej8l5
但是我必须添加两个按钮，当第一个按钮被按下时，会显示去第一班的员工列表，当按下第二个按钮时，会显示去第二班的员工。

我在代码中添加的内容：
1) 在today.json文件中添加对象second（第二班员工名单）
2) 添加 SecondToday.js 文件并创建 SecondToday 组件（用于显示第二个班次列表）
3) 在 App.js 的 state 中添加 defaultTab 属性和 true 值，然后创建两个改变状态的方法，并据此在 render 方法中显示 FirstToday 组件（第一个列表轮班工人）或 SecondToday 组件（第二轮班工人列表）。

但是在我的更改之后，现在根本不显示列表....
这是一个新选项：
https://codesandbox.io/s/focused-ellis-wbkyr
如何解决问题？我还没有做什么？

Answer 1

您的问题与您的 .json 数据文件未正确格式化为 json 的事实有关。

I replaced your json data file with the working one and it now loads correctly.

修复后第二个问题仍然不显示与您在SecondToday.js中的数据验证检查有关。您正在检查 props.data.group.second 是否存在，但它是未定义的。如果您记录您的道具，则表明您的second 密钥存在于group 之外。