使用Formik FieldArray存储数组并渲染View时遇匿名数组问题求助

你的代码存在几个关键错误，导致出现匿名数组且无法正常展示输入内容：

1. newData变量的不合理使用：const newData = [];会在组件每次渲染时重新初始化为空数组，无法持久化存储数据，依赖它传递状态完全无效。
2. setstorage写法错误：你把匿名函数直接塞进数组传给setstorage，导致storage变成了包含匿名函数的数组，这就是你看到的"匿名数组"问题。
3. 异步状态更新的误解：setstorage是异步操作，调用后立即打印storage得到的还是更新前的旧值。

修复后的代码 #

状态更新部分：

const [storage, setStorage] = React.useState([]);

const callFunction = (values) => {
  // 使用useState的函数式更新，确保拿到最新的状态值
  setStorage(prevStorage => [...prevStorage, values]);
};

渲染展示部分：

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

额外补充 #

如果需要查看更新后的storage状态，不能在setStorage后直接打印，要通过useEffect监听状态变化：

React.useEffect(() => {
  console.log("更新后的storage: ", storage);
}, [storage]);

所有需要在组件渲染间保留的数据，都应该用useState或useRef管理，不要用普通变量存储状态。

内容的提问来源于stack exchange，提问作者Anuj Todankar