Как вызвать установщик useState внутри функции рабочего листа?

Question

Я пытаюсь вызвать функцию установки React useState из функции рабочего листа. Этот обратный вызов предоставляется пакетом https://github.com/mgcrea/react-native-dnd , который предоставляет событие onDragEnd.

Я нашел другие ответы SO , предлагающие использовать runOnJS из реакции-родной-реанимации для запуска JS-кода из потока пользовательского интерфейса (эта функция ворлета). Но консоль регистрируется внутриrunOnJSи в самой функции рендеринга не обновляется, когдаhandleDragEndизлучает.

Что нужно изменить, чтобы вызвать установщик useState внутри функции рабочего листа?

Ниже приведен фрагмент, показывающий рабочий лист и некоторые функции рендеринга:

      import {runOnJS} from 'react-native-reanimated';

  const handleDragEnd: DndProviderProps['onDragEnd'] = ({active, over}) => {
    'worklet';
    if (over) {
      console.log('onDragEnd', {active, over});
      console.log(active);

      // Create a new item based on the type of the dragged item
      const newItem = {
        partName: `${active.id.split('-')[0]}`,
      };

      runOnJS(() => {
        // Add the new item to ductItems
        setDuctItems((prevDuctItems) => {
          const updatedDuctItems = [...prevDuctItems, newItem];
          console.log('Updated ductItems:', updatedDuctItems);
          return updatedDuctItems;
        });
      });

      dynamicData.value = {
        over: over,
      };
    }
  };

  return (
    <GestureHandlerRootView>
      <View style={styles.container}>
        <DndProvider
          onDragEnd={handleDragEnd}
          >
          <Droppable id="drop" style={styles.dropBox}>
            <Text>DROP</Text>
          </Droppable>
          <View style={styles.partsContainer}>
            <Text>{JSON.stringify(ductItems)}</Text>
            {ductItems.map((item, index) => (
              <DraggableCustomComponent
                style={styles.partItem}
                id={`${item.partName}-${index}-key`}
                key={`${item.partName}-${index}-key`}
                partType={item.partName}
                data={dynamicData}
              />
            ))}
          </View>
        </DndProvider>
  );

Answer 1

Проблема заключалась в том, что я неправильно вызывал runOnJs в соответствии с реанимированной документацией . Функция использует шаблон «каррирования», который принимает аргументы в качестве последнего параметра:

      const replaceDuctPart = (item: {partName: string}) => {
    setDuctItems((prevDuctItems) => {
      const updatedDuctItems = [...prevDuctItems, item];
      console.log('Updated ductItems:', updatedDuctItems);
      return updatedDuctItems;
    });
  };

runOnJS(replaceDuctPart)(newItem);