Как обновить состояние в return ()?

Question

Я хочу изменить состояние, когда я получу идентификатор 5/6 или 7 после TouchableOpacity. Потому что я хочу один раз показать кнопку «Другое», независимо от того, равен ли id 5/6 или 7.

export function HomePage({ navigation }) {

   const [parentServiceCheck, setParentServiceCheck] = useState({ check: '0' });

   return (
       <View>
           <FlatList numColumns={2} contentContainerStyle={{ margin: 7, flex: 1 }} keyExtractor={(item, index) => item.id} data={allService} renderItem={itemData => (
               <View style={{ flexDirection: 'column', flex: 1 }}>
                   {
                       (itemData.item.id == 5 || itemData.item.id == 6 || itemData.item.id == 7) && parentServiceCheck.check == '0' ?
                           <TouchableOpacity onPress={() => pressHandler(itemData.item.id)} style={{ margin: 7 }}>
                               <Card titlebtn="Other Things" src={itemData.item.service_image} sty={{ height: 180, }} />
                           </TouchableOpacity>
                           // Now here I want to setParentServiceChildCheck({check: '1'}) when itemData.item.id has 5/6/7
                           :
                           <TouchableOpacity onPress={() => pressHandler(itemData.item.id)} style={{ margin: 7 }}>
                               <Card titlebtn={itemData.item.service_name} src={itemData.item.service_image} sty={{ height: 180, }} />
                           </TouchableOpacity>
                   }
               </View>
           )}
           />
       </View>
   )
}

Answer 1

Вы не можете обновить или выполнить любой подобный код JS. Я бы посоветовал go пройти несколько тренингов, чтобы узнать, как все работает в React JSX.

На данный момент, если вы хотите обновить состояние, вам следует использовать его в useEffect, как показано ниже

export default function HomePage({ navigation }) {
  const [parentServiceCheck, setParentServiceCheck] = useState({ check: '0' });

  useEffect(() => {
    const hasValidId = allService.find(_hasValidId);

    // This will get called only once after first render
    // This will execute only when id's are 5, 6 or 7 which is your requirement 
    if (hasValidId) {
      setParentServiceChildCheck({ check: '1' });
    }
  }, []);

  const _hasValidId = itemData => {
    const itemId = itemData?.item?.id;
    const validItemIds = [5, 6, 7];
    return validItemIds.includes(itemId);
  };

  const _renderItem = itemData => {
    const itemId = itemData?.item?.id;
    let content = null;

    if (_hasValidId(itemData)) {
      if (parentServiceCheck.check === '0') {
        content = (
          <TouchableOpacity onPress={() => pressHandler(itemId)} style={{ margin: 7 }}>
            <Card titlebtn="Other Things" src={itemData.item.service_image} sty={{ height: 180 }} />
          </TouchableOpacity>
        );
      } else {
        content = (
          <TouchableOpacity onPress={() => pressHandler(itemId)} style={{ margin: 7 }}>
            <Card
              titlebtn={itemData.item.service_name}
              src={itemData.item.service_image}
              sty={{ height: 180 }}
            />
          </TouchableOpacity>
        );
      }
    }

    return <View style={{ flexDirection: 'column', flex: 1 }}>{content}</View>;
  };

  return (
    <View>
      <FlatList
        numColumns={2}
        contentContainerStyle={{ margin: 7, flex: 1 }}
        keyExtractor={(item, index) => item.id}
        data={allService}
        renderItem={_renderItem}
      />
    </View>
  );
}

К вашему сведению, вам может потребоваться изменить несколько строк, поскольку весь код компонента не является общим, и я не знаю о вашем бизнес-логе c.

Answer 2

Вы никогда не должны обновлять состояние в функции возврата / рендеринга. Произойдет бесконечный рендеринг l oop.