React Native 功能組件僅在第二次提交時更新狀態

Question

當我控制台記錄我的值時，它僅在我第二次提交表單時更新。 為什么會這樣？

const Link = (props) => {
  const { state, scrape } = useContext(ScrapeContext);
  const [clipboard, setClipboard] = useState();
  const [googleClip, setGoogleClip] = useState(false);
  const [googleLink, setGoogleLink] = useState('');

  const urlFromClipboard = () => {
    Clipboard.getString().then((content) => {
      if (content.includes('https://www.google.com')){
        setGoogleClip(true);
        console.log('googleLink', googleLink);
        setClipboard(content);
        setGoogleLink(`${content.split('?')[0]}?__a=1`);
      } else {
        setGoogleClip(false);
      }
    });

    if (googleClip) {
      console.log(googleLink);
      scrape({ googleLink });
    }
  }

  useEffect(() => {
    urlFromClipboard();
    console.log('useEffect googleLink', googleLink);
    console.log('useEffect state', state);
  }, [clipboard]);


  return (
    <View style={styles.container}>
      <View style={styles.inputFieldContainer}>
        <TextInput
          style={styles.inputField}
          placeholder='Enter Google url'
          autoCapitalize='none'
          autoCorrect={false}
          value={googleClip ? clipboard : ''}
        />
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          onPress={() => {
            urlFromClipboard();
          }}
          style={styles.touchSubmit}
        >
          <Text style={styles.touchText}>Submit</Text>
        </TouchableOpacity>
      </View>
      {state.errorMessage ? (
        <Text style={styles.errorMessage}>{state.errorMessage}</Text>
      ) : null}
    </View>
  );
}

我這里有一個組件，它將從 url 中獲取數據，並在提交時抓取應用程序需要的某些信息，但是，如果我按兩次提交按鈕，它只會更新這些控制台日志值。

Answer 1

問題在於您在設置狀態后無法立即訪問狀態。 所以你實際上設置了狀態，它就在那里，但你只能在第二次運行控制台日志時看到更新的狀態。 這並不意味着您必須提交兩次，而是當您第二次提交時，您第二次運行 console.log 並查看值。 因為設置狀態函數是異步的，在這種情況下，你需要使用回調函數在控制台上實際看到更新的狀態。 希望有幫助。

Answer 2

就像 Bora Sumer 提到的那樣，您嘗試在實際更新之前使用狀態值。 你可以這樣做：

    Clipboard.getString().then((content) => {
      if (content.includes('https://www.google.com')){

        let link = `${content.split('?')[0]}?__a=1`
        setGoogleClip(true);
        console.log('googleLink', googleLink);
        setClipboard(content);
        setGoogleLink(link);
        console.log(link);
        scrape({ googleLink: link });

      } else {
        setGoogleClip(false);
      }
    });

Answer 3

您可以在每次 setState 時使用 async/await，如下所示：

const urlFromClipboard = () => {
Clipboard.getString().then( async (content) => {
  if (content.includes('https://www.google.com')){
    await setGoogleClip(true);
    console.log('googleLink', googleLink);
    await setClipboard(content);
    await setGoogleLink(`${content.split('?')[0]}?__a=1`);
  } else {
    await setGoogleClip(false);
  }
 });

 if (googleClip) {
    console.log(googleLink);
    scrape({ googleLink });
 }
}