Enchanting witch's questions

我正在尝试通过传输对象 ID 值从一个屏幕形式 (/(tabs)/structure) 转换到另一个屏幕形式 (/structures/system)。应用程序堆栈声明文件夹（选项卡）和结构。

（标签）/_layout.tsx

import React from 'react';
import { Tabs } from 'expo-router';

export default function TabLayout() {

  return (
    <Tabs>
      <Tabs.Screen
        name="structure"
      />

    </Tabs>
  )
}

结构/_layout.tsx

import React from 'react';
import { Stack } from 'expo-router';

export default function TabLayout() {
  return (

    <Stack>
      <Stack.Screen
        name="system"
        initialParams={{ idSystem: 1 }}
        }}
      />
    </Stack>
  )
}

在 的帮助下router.push('/structures/system')，转换工作正常，但据我了解，它不允许传输必要的值，因此我尝试在navigation.navigate('structures', {screen: 'system'}, {idSystem: item.id})- 的帮助下组织它。转换已执行，但出现以下错误：

（NOBRIDGE）错误警告：TypeError：无法读取未定义的属性“params”

结构/系统.tsx

import { ScrollView } from 'react-native';
import { router, useNavigation } from 'expo-router';

export default function TabOneScreen({route}: any) {
  const navigation = useNavigation();
  const {idSystem} = route.params;
  console.log(idSystem);

  return (
    <ScrollView >
    //smth
    </ScrollView>
  );
}

如果您写的是 TabOneScreen(idSystem: any) 而不是 TabOneScreen({route}: any)，它会产生以下内容作为 idSystem 值的控制台输出：

{“段”：“系统”}

告诉我问题出在哪里，如何正确组织过渡与价值转移？

曾尝试通过渲染过程中的状态变化以图标的形式按条件输出状态，但遇到了以下问题：与从数据库接收的数据相比，状态值正确地输出到控制台，但它始终写入状态，无论状态值（变量 statBlue、statEmpty）、iconBlue 的值为 true 和 iconEmpty 的值为 false。因此，屏幕上显示的不是正确的图标，而只是与iconBlue对应的图标。

还会出现一个警告，并讨论该主题：

警告：无法从不同组件的函数体内更新组件。 https://github.com/facebook/react/issues/18178

也许有不同的方法来检查状态并显示图标？

import React, { useState, useEffect } from 'react';
import { Text, View, FlatList, SafeAreaView } from 'react-native';
 
type Note = {
  commentId: number; 
  systemName: string;
  commentStatus: string;
};

const DirectionLayout = () => {
 
  const [iconBlue, setIconBlue]= useState<boolean>(false);//Устранено без просрочки
  const [iconEmpty, setIconEmpty]= useState<boolean>(false);//Не устранено без просрочки
  
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState<Note[]>([]);

  const getNotes = async () => {
    try {
      const response = await fetch('https://...');
      const json = await response.json();
      setData(json);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    getNotes();
  }, []);


  const iconFunction = (status: string) => {
 
    console.log((status == 'Устранено'));
    const statBlue = (status === 'Устранено');
    const statEmpty = (status === 'Не устранено');
    console.log(statBlue);
    console.log(statEmpty);

    //if ((status == 'Не устранено')==false){setIconBlue(true);}
    //if ((status == 'Не устранено')==true){setIconEmpty(true);}
    setIconBlue(statBlue);
    setIconEmpty(statEmpty);

    console.log(iconBlue);
    console.log(iconEmpty);
  };


  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>

      <View style={{
        flex: 1, alignItems: 'center'
      }}>
               { isLoading ? (
              <ActivityIndicator />
            ) : (
              <FlatList
                style={{width: '100%'}}
                data={data}
                keyExtractor={({commentId}) => commentId}
                renderItem={({item}) => (
                  
                  <View style={{ backgroundColor: '#E0F2FE', width: '100%', height: 32, justifyContent: 'center', marginBottom: 41, borderRadius: 8}}>
                      <Text style={{ fontSize: 16, color: '#334155', textAlign: 'left' }}>{item.systemName}</Text>    
                  <View style={{width: '7%', marginStart: 2, justifyContent: 'center'}}>

                     {iconFunction(item.commentStatus)}

                       {iconBlue ? ( <Ionicons name="checkmark-circle" size={25} color="#0072C8" />): (<View/>) } 
                       {iconEmpty ? ( <Ionicons name="checkmark-circle" size={25} color="#F0F9FF" />):(<View/>)}
                      
                      </View>
                  </View>
          )}
              />
            )}
      </View >
    </SafeAreaView >

  );
};


export default DirectionLayout;

当尝试以以下方式显示图标时：

{(item.commentStatus ='Устранено') ? ( <Ionicons name="checkmark-circle" size={25} color="#0072C8" />): ''}

我遇到了这个问题：

（NOBRIDGE）错误警告：错误：对象作为 React 子项无效（发现：带有键 {if} 的对象）。如果您想要渲染子项集合，请改用数组。

我正在尝试在屏幕上显示一个结构数据数组。问题是我不知道如何输出具有这种结构的数组，其中每个对象都有一个数组系统。它看起来应该类似于 SectionList，但对于 header 和 item 来说，它应该是多个数据的字符串。

实现基于此示例https://reactnativedev.ru/rn/sectionlist/#_1

目前，表单崩溃并出现以下错误：

（NOBRIDGE）错误警告：TypeError：无法读取未定义的属性“length”

请求正确发送，返回数据，数据与json数据类型匹配。但也许问题也出在结构中的“子数组”系统的声明中？

在此之前我尝试通过嵌套的平面列表进行输出，但系统数据并未输出。

import { SectionList,  Text, TouchableOpacity, View } from 'react-native'
import { router } from 'expo-router';

type Structure = {
  id: number;
  comments: number;
  status: string;
  
    systems:[
      id: number,
      numberII: string,
      systemName: string,
    ],
};


const Struct = () => {
  
  const [data, setData] = useState<Structure[]>([]);

  const getStructure = async () => {
      try {
        const response = await fetch('https://...');
        const json = await response.json();
        setData(json);
        console.log('ResponseSeeStructure:', response);
      } catch (error) {
        console.error(error);
      } finally {
      }
    };
  
    useEffect(() => {
      getStructure();
    }, []);


  //const font16 = MonoSizeText(16);
    return(

        <SectionList
            sections = {data}
            keyExtractor={({id}) => id}
                        
             renderSectionHeader={({section: {comments, status}}) => (
                    <View style={{flexDirection: 'row', width: '100%', height: 32, paddingTop: 6, marginBottom: '3%', alignSelf: 'center', }}>

                      <View style={{width: '23%'}}>
                      <Text style={{ fontSize: 14, color: '#334155', textAlign: 'center' }}>{comments}</Text>
                      </View>

                      <View style={{width: '42%'}}>
                      <Text style={{ fontSize: 14, color: '#334155', textAlign: 'center' }}>{status}</Text>
                      </View>

                    </View>
                   )}
                
                  
                    renderItem={({item: {systems}}) => (

                      <TouchableOpacity onPress={() =>{ router.push('/structures/system')}}>
                      <View style={{ alignSelf: 'center',   backgroundColor: '#E0F2FE', flexDirection: 'row', width: '98%', height: 32, marginBottom: 41, borderRadius: 8}}>
            
                        <View style={{width: '10%',  justifyContent: 'center',}}>
                        <Text style={{ fontSize:14, color: '#334155', textAlign: 'center' }}>{systems.numberII}</Text>
                        </View>
                        
                        <View style={{width: '25%',  justifyContent: 'center',}}>
                        <Text style={{ fontSize: 14, color: '#334155', textAlign: 'center' }}>{systems.systemName}</Text>
                        </View>

                      </View>
                      </TouchableOpacity>

                    )}
        />
    );
  };

export default Struct;```