如何修复一个错误，它不显示Select中的任何值，我可以单击它，它取出最后一个对象

Question

UPDATE 找不到真正的解决方案。通过使用Context发送信息而不是通过组件发送所有信息来解决。

---

我已经在表单中显示了Select中显示的项目列表。但Select不会显示任何一个。如果我单击列表，它将显示“选择”框中的最后一个值。

我尝试在干净的reactjs脚本中重建它，它运行得很好。可能是我忘记了我无法弄清楚的东西。

我使用了Material-ui网站的虚拟版本，但得到了同样的错误。 我还尝试构建一个只有模板表单的干净版本，它运行得很好。所以代码应该是正确的。

<FormControl>
    <InputLabel htmlFor="listOfInformation">
         List of Information
    </InputLabel>
    <Select
         value={listOfInformation}
         name='List of Information'
         onChange={this.handleChange('listOfInformation')}
    >
         {categories.map(category => 
              <MenuItem 
                   open={open} 
                   key={category} 
                   value={category}
              >
                   {category}
                   {console.log("Test ", category)}
              </MenuItem>
         )}
    </Select>
</FormControl>

这位于我的表格内。我的表格也有TextFields可以正常工作。我已经调用App.js中的组件以确保我之前没有做错任何事，它得到了同样的错误。

弹出窗口没有表现出那么好。它应该显示整个信息列表

Answer 1

我不知道发生了什么。我认为我在通过组件发送它们时如何处理我的值有一些错误（嵌套4深）。我改变了我的处理方式而不是使用上下文。这解决了这个bug。我认为它没有抓住正确的价值。

对我来说，解决方案是使用上下文来处理我的所有值。我使用这个解决方案，因为我认为Redux或类似的解决方案会很多，但需要上下文，因为我正在传递大量信息。