Javascript .map在使用useState钩子触发setState后不是函数

该组件将第一次渲染，但当我触发handleControl函数时，错误显示Components.map不是一个函数，它基本上是说在我触发handleControl函数后，我的配料状态变得未定义。我正在为这个问题绞尽脑汁一段时间，不知道如何解决它，请帮帮一个兄弟！！！提前谢谢你

//useState
常量[成分，设置成分]=使用状态([{
id:1，
名称：‘面粉’，
卡路里：“1520/362”，
蛋白质：7.9，
脂肪：6.6，
纤维：3.3，
碳水化合物：3.3，
胆甾醇：0.2，
维生素C:0.2，
控件：false
}])

函数更改控件的值

功能手柄控制（e，索引）{
让值=e.target.value
设置成分（状态=>{
state.ingredents[index].controls=！value
返回(
//{…PrevComponent，控件：！PrevComponent.controls}
{…州}
)
})
}

要渲染的组件

{配料和配料.map（（配料，索引）=>(
{component.id}
{component.name}
{成分.卡路里}
{成分.蛋白质}
{成分.纤维}
{成分.脂肪}
{成分.碳水化合物}
{成分.胆固醇}
{成分维生素C}
{//component.controls////
//保存//取消//
// :
{handleControl（e，index）}value={component.controls}className={component.id}>Edit
删除
}
)) }

您正在通过此行将列表转换为对象

setComponents（状态=>{
state.ingredents[index].controls=！value
返回(
//{…PrevComponent，控件：！PrevComponent.controls}
{…州}
)
})

您应该以数组的形式返回新状态，如下所示：

setComponents（状态=>{
状态[索引]。控件=！值
返回状态
})

您在

setComponents

中设置了

{}

而不是

[]

。问题是只能在数组上调用。我用[]标记将对象括起来，因此它应该注册为对象数组。您的状态从数组开始，但当您调用

setIncoments

时，您正在这样做：

useIncoments（state=>{}）

并在其中使用

state.Ingreents

。它应该是

状态

（我称之为

成分

），例如

设置成分（成分=>{}）

，然后返回另一个数组。在本例中，状态项是一个数组，而不是一个对象？SetComponents（Components=>{ingredents[index].controls=！value return（{…Components}）仍在快速运行。map不是函数错误现在其返回无法读取未定义的属性“0”。那么我如何在SetComponents之后保留对象的其他属性？