重置選擇專案-ReactNative

我有一個包含選擇下拉串列的表單（通過 api 呼叫填充專案）。當我離開螢屏時，我希望能夠將其重置回初始狀態（默認狀態是占位符 - 選擇事件）

我可以在 a 中清除文本和 textarea 輸入，useFocusEffect()但很難理解如何重置選擇下拉串列

要重置我嘗試過的選擇下拉串列，setEventTypeData([]);但是當導航回螢屏時，最后選擇的選項仍然被選中（雖然文本輸入已被清除）

export const CreateNewEvent = ({navigation}) => {
  const globalContext = useContext(AppContext);
  const userId = globalContext.userInfo.id;
  // dropdown populated with this
  const [eventTypeData, setEventTypeData] = useState([]);
  const [newEventDescription, setEventDescription] = useState('');
  const [newEventLimit, setEventLimit] = useState(0);

  const clearFormData = () => {
    setEventTypeData([]); // tried setting back to original state but does not work
    setEventDescription('');
    setEventLimit(0);
  };

  useFocusEffect(
    React.useCallback(() => {
      const body = JSON.stringify({userId});
      fetch(eventTypesUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
        body: body,
      })
      .then(response => response.json())
      .then(json => setEventTypeData(json))
      .catch(error => console.error(error))
      .finally(() => setLoading(false));

    return () => {
      // Run logic when the user leaves screen,
      // Clear form
      clearFormData();
    };
  }, [userId]),
);

// Select Dropdown
{/* Event Name Select Field */}
<FormControl isRequired isInvalid={'eventName' in errors}>
  <FormControl.Label>Select Event</FormControl.Label>
  <Select
    onValueChange={newEventName =>
    updateEventNameAndDescription(newEventName)
  }
    placeholder="Select Event"
    {eventTypeData.map(event => (
      <Select.Item
        key={event.id}
        label={event.name}
        value={event.name}
       />
     ))}
  </Select>
}

我如何確保在導航回此螢屏時選擇下拉選單重置為其原始狀態

謝謝

uj5u.com熱心網友回復：

我重寫你的例子。我希望這會有所幫助。您忘記取消訂閱 API 呼叫

import { useIsFocused } from '@react-navigation/native';

  const isFocused = useIsFocused();

  useEffect(() => {
    if (!isFocused) {
      clearFormData()
    }
  }, [isFocused]);

  useFocusEffect(
    React.useCallback(() => {
      const body = JSON.stringify({ userId });
      const unsubscribe = fetch(eventTypesUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        },
        body: body,
      })
        .then((response) => response.json())
        .then((json) => setEventTypeData(json))
        .catch((error) => console.error(error))
        .finally(() => setLoading(false));

      return () => unsubscribe();
      };
    }, [userId]),
  );

uj5u.com熱心網友回復：

    export const CreateNewEvent = ({navigation}) => {
    const globalContext = useContext(AppContext);
    const userId = globalContext.userInfo.id;
    // dropdown populated with this
    const [eventTypeData, setEventTypeData] = useState([]);
    const [newEventDescription, setEventDescription] = useState('');
    const [newEventLimit, setEventLimit] = useState(0);

    const [selectedEventName, setSelectedEventName] = useState(); 
  
    const clearFormData = () => {
        setSelectedEventName(); 
        setEventDescription('');
        setEventLimit(0);
      };

    useEffect(() => {
        selectedEventName ? updateEventNameAndDescription(selectedEventName) : clearFormData();

    }, [selectedEventName])
  
    useFocusEffect(
      React.useCallback(() => {
        const body = JSON.stringify({userId});
        fetch(eventTypesUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
          },
          body: body,
        })
        .then(response => response.json())
        .then(json => setEventTypeData(json))
        .catch(error => console.error(error))
        .finally(() => setLoading(false));

      return () => {
        // Run logic when the user leaves screen,
        // Clear form
        clearFormData();
      };
    }, [userId]),
  );
  
  // Select Dropdown
  {/* Event Name Select Field */}
  <FormControl isRequired isInvalid={'eventName' in errors}>
    <FormControl.Label>Select Event</FormControl.Label>
    <Select
      value={selectedEventName}
      onValueChange={newEventName =>
        setSelectedEventName(newEventName)
    }
      placeholder="Select Event"
      {eventTypeData.map(event => (
        <Select.Item
          key={event.id}
          label={event.name}
          value={event.name}
         />
       ))}
    </Select>
  }

uj5u.com熱心網友回復：

如果您使用 React Native Picker 或相關的東西，該選擇器系結到設備原生 Select 組件，這具有更多的性能優勢，因為它不在 JavaScript 執行緒上運行，React 重新渲染不會影響該組件。

但是在這種情況下，我們需要在用戶離開螢屏時強制卸載該組件，或者在螢屏獲得焦點時強制安裝。

// Top-level import
import { useIsFocused } from '@react-navigation/native';


// Inside functional component

 const isFocused = useIsFocused();


// Force <Select> to unmount or mount when screen focused


{ isFocused &&  <Select
      value={selectedEventName}
      onValueChange={newEventName =>
        setSelectedEventName(newEventName)
    }
      placeholder="Select Event"
      {eventTypeData.map(event => (
        <Select.Item
          key={event.id}
          label={event.name}
          value={event.name}
         />
       ))}
    </Select>}

標籤：

上一篇：Firestore地圖陣列未更新

下一篇：PowerShell：從重命名計算機到Var的控制臺警告