React Native数组对象值检索及Minified React错误#301咨询

报错原因 #

• 无限循环渲染（React错误#301）：直接在组件函数体中调用setArrays(initArray)，组件每次渲染都会执行这个状态更新，状态变化又会触发新一轮渲染，陷入无限循环，这是报错的核心原因。
• 无效map()调用：arrays.filter(...).map()未传入回调函数，属于语法错误，会直接导致代码执行异常。
• 核心逻辑缺失：当前代码仅做了数组过滤，完全没实现“检查id是否存在，不存在则添加新对象”的需求。

正确实现代码 #

import { useState, useEffect } from 'react';
import { View, TouchableOpacity } from 'react-native';
import Card from './components/Card';
import AssetExample from './components/AssetExample';

export default function App() {
  const [arrays, setArrays] = useState([]);
  const initArray = [
    { id: 2023, solveTF: false, rightTF: false },
    { id: 2025, solveTF: false, rightTF: false },
  ];
  const idArrays = [2022, 2023, 2025, 2027];

  // 仅在组件首次挂载时初始化数组
  useEffect(() => {
    setArrays(initArray);
  }, []);

  const idSearch = () => {
    // 函数式更新获取最新状态，避免状态滞后
    setArrays(prevArrays => {
      // 筛选出idArrays中不在原数组的id
      const missingIds = idArrays.filter(id => {
        return !prevArrays.some(item => item.id === id);
      });
      // 将缺失id转换为对应对象
      const newItems = missingIds.map(id => ({ id, solveTF: false, rightTF: false }));
      // 合并原数组与新对象，返回新数组
      return [...prevArrays, ...newItems];
    });
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={idSearch}>
        <Card>
          <AssetExample />
        </Card>
      </TouchableOpacity>
    </View>
  );
}

// 样式示例，可根据实际需求调整
const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
};

关键改动说明 #

1. 用useEffect包裹初始化代码，空依赖数组确保仅执行一次，彻底解决无限循环问题。
2. 采用函数式更新setArrays(prevArrays => ...)，保证获取到最新的数组状态，避免更新滞后。
3. 通过filter+some筛选缺失id，再转换为新对象合并到原数组，完整实现“不存在则添加”的需求。
4. 删除无效的map()调用，修复语法错误。

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