list is not refreshed

[rovoskarl]

Rendering a checkbox in a list will not re-render after the check state is updated

[rovoskarl]

const MoreComponent: React.FC<MoreComponentProps> = ({
  conditions = {},
  setSearchData,
  type,
  shopPositionRequest,
  position,
}) => {
  const { searchFields, searchShopFields, searchPoiFields } = useSearchField({ type });

  const handleCheckedChange = useCallback(
    (field: Field, options: Array<{ value: string }>, checked: boolean) => {
      setSearchData((prevData: any) => {
        const targetKey = types[type];
        const updatedOptions = checked ? options.map((item) => item.value) : [];
        const newConditions = {
          ...prevData[targetKey]?.conditions,
          [field.id]: {
            type: field.type,
            options: updatedOptions,
          },
        };

        const updatedData = systemFields?.includes(field.id)
          ? {
              [targetKey]: {
                ...prevData[targetKey],
                [field.id]: updatedOptions,
                conditions: newConditions,
              },
            }
          : {
              [targetKey]: {
                ...prevData[targetKey],
                conditions: newConditions,
              },
            };

        return {
          ...prevData,
          ...updatedData,
        };
      });
    },
    [setSearchData, type],
  );

  const handleOptionClick = useCallback(
    (field: Field, value: string, checked: boolean) => {
      setSearchData((prevData: any) => {
        const targetKey = types[type];
        const fieldOptions = conditions[field.id]?.options || [];
        const updatedFieldOptions = checked ? fieldOptions.filter((item) => item !== value) : [...fieldOptions, value];

        const newConditions = {
          ...prevData[targetKey]?.conditions,
          [field.id]: {
            type: field.type,
            options: updatedFieldOptions,
          },
        };
        const updatedData = systemFields?.includes(field.id)
          ? {
              [targetKey]: {
                ...prevData[targetKey],
                [field.id]: updatedFieldOptions,
                conditions: newConditions,
              },
            }
          : {
              [targetKey]: {
                ...prevData[targetKey],
                conditions: newConditions,
              },
            };

        return {
          ...prevData,
          ...updatedData,
        };
      });
    },
    [conditions, setSearchData, type],
  );

  const fields = useMemo(
    () => ({
      position: searchFields,
      shop: searchShopFields,
      poi: searchPoiFields,
    }),
    [searchFields, searchShopFields, searchPoiFields],
  );

  const renderItem = ({ item: field }: { item: Field }) => {
    const options = field.options ?? [];
    const fieldOptions = conditions[field.id]?.options || [];
    console.log(11);
    return (
      <YStack key={field.id} space={4}>
        <XStack justifyContent="space-between" alignItems="center">
          <Text color="#141414" fontWeight="500" maxWidth="80%" fontSize={14} numberOfLines={1} ellipsizeMode="tail">
            {field.fieldName}
          </Text>
          <XStack space="$2" alignItems="center">
            <Checkbox
              size="$4"
              checked={fieldOptions.length === options.length}
              backgroundColor="$white"
              onCheckedChange={(checked: boolean) => handleCheckedChange(field, options, checked)}
            >
              <Checkbox.Indicator borderRadius={4} style={{ backgroundColor: '#00BBB4', width: 20, height: 20 }}>
                <Check color="#fff" width={20} height={20} />
              </Checkbox.Indicator>
            </Checkbox>
            <Label htmlFor={field.id}>全选</Label>
          </XStack>
        </XStack>
        <XStack space="$2" flexWrap="wrap">
          {options.map(({ description, value }) => {
            const checked = fieldOptions.includes(value);

            return (
              <Button
                key={value}
                height={32}
                noTextWrap
                marginBottom={8}
                backgroundColor={checked ? '$primary1Light' : '#FAFAFA'}
                color={checked ? '$primaryLight' : '#141414'}
                borderColor={checked ? '$primaryLight' : '#FFFFFF'}
                onPress={() => handleOptionClick(field, value, checked)}
              >
                <Text fontSize={12} numberOfLines={1}>
                  {description}
                </Text>
              </Button>
            );
          })}
        </XStack>
      </YStack>
    );
  };

  const ListHeader = useCallback(
    () => (
      <YStack space="$4">
        <YStack>
          <Text color="#141414" fontWeight="500" fontSize={14} marginBottom="$3">
            颜色
          </Text>
          <Colors
            value={(type === 'shop' ? shopPositionRequest?.colors : position?.colors) || []}
            onChange={(v) => {
              setSearchData((_prev: any) => ({
                ..._prev,
                [type === 'shop' ? 'shopPositionRequest' : 'position']: {
                  ..._prev?.[type === 'shop' ? 'shopPositionRequest' : 'position'],
                  colors: v,
                },
              }));
            }}
          />
        </YStack>
        <YStack>
          <Text color="#141414" fontWeight="500" fontSize={14} marginBottom="$3">
            创建人
          </Text>
          <Creators
            creators={type === 'shop' ? shopPositionRequest?.creators : position?.creators}
            type={type}
            setSearchData={setSearchData}
          />
        </YStack>
      </YStack>
    ),
    [
      position?.colors,
      position?.creators,
      setSearchData,
      shopPositionRequest?.colors,
      shopPositionRequest?.creators,
      type,
    ],
  );

  return (
    <YStack space="$2" height={300}>
      <FlashList
        removeClippedSubviews={Platform.OS === 'android'}
        onEndReachedThreshold={0.3}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        data={fields[type]}
        keyExtractor={(_item: any) => _item?.id}
        estimatedItemSize={50}
        renderItem={renderItem}
        ListHeaderComponent={ListHeader}
      />
    </YStack>
  );
};```

[Code-Victor]

I'm facing similar issue

[pajardsaputra]

@rovoskarl have you tried property extraData on your flashlist component?
Based on your code, i think u should add extraData={fields} on FlashList component. Or if you have more data that will need re-render you can pass it with array like this extraData={[type, otherVar]}

u should try to use extraData too @Code-Victor

[Iltimirov]

Put checked flag inside your item in data. I think it should fix your problem

[rovoskarl]

Great extraData solved my problem