我使用Formik FieldArray获取输入并将所有输入存储在一个数组中,并希望在视图中显示所有输入,但作为回报,我得到了一个匿名array.这对我不起作用.谁能帮帮我吗.


     const newData = [];
        const [storage, setstorage] = React.useState([]);
     const callFunction = (values) => {
            newData.push(values);
    
            console.log("0-0-1", newData);
    
            setstorage([newData => [...newData, storage]]);
            console.log("storage ", storage);
        }

     {
                 storage.length > 0 &&
                         <View>
                         {
                                 storage.map((menFor, index) =>
                          (
                            <View style={{
                                 paddingTop: 10,
                                   paddingBottom: 10,
                                   backgroundColor: 'green',
                                 flexDirection: 'row',
                                  marginBottom: 20,
                       borderRadius: 5
                                  }}>
                              <Text key={index}>{menFor}</Text>
                               </View>
                            )
                            )
                        }
                  </View>
            }


推荐答案

关于流程,我不确定,但以下是我认为导致错误的原因:

setstorage([newData => [...newData, storage]]);

setstorage中的newData变量掩盖了在callFunction中推送值的变量,可以这样调用setstorage:

setstorage([...newData, ...storage]);

或者,根据您的用例,您可以简单地执行以下操作:

setstorage([...storage, values]);

Reactjs相关问答推荐

使用Overpass API Endpoint计算 map 上的面积

从Microsoft Excel粘贴复制的单元格时,将Excel单元格格式(粗体、下划线、斜体)带入Reaction

StyleX中的多语言支持

为什么查询错误在处理后仍出现在控制台中?RTK查询+ React

在React中映射对象数组时,如何正确呈现JSX.Element或React.ReactNode类型?

如何使用TouchStart/TouchEnd在Table ReactJS中交换位置?

关于forwardRef,我可以';我不理解第二个用例

Mui / Material UI 5:如何从 StaticTimePicker 中删除打开下一个视图/打开上一个视图按钮?

如何根据用户在react.js中的 Select , Select 多个心形图标?

如何修改 react/jsx-no-useless-fragment 规则以允许 <>{children}

Zod 验证模式根据另一个数组字段使字段成为必需字段

如何在 React.js 中提取 PDF 的内容?

如何使用样式化函数为 TextField 的输入组件设置样式

DatePicker MUI 如何在日历左侧显示清除文本

如何在 MUI 数据网格中的 renderCell 组件之间传递状态

模块解析失败:意外令牌 (257:106) 您可能需要适当的加载程序来处理此文件类型

.filter() 函数在删除函数中创建循环 - React

由于另一个子组件,如何在react 中渲染另一个子组件

react 路由:router.ts:11 没有匹配的路由位置/管理

当上下文中的状态发生变化时,组件不会立即重新渲染