Реагировать на состояние обновлений собственного функционального компонента только при второй передаче - PullRequest
Новая
       21

Реагировать на состояние обновлений собственного функционального компонента только при второй передаче

0 голосов
/ 05 января 2020

Когда я записываю в журнал свои значения, он обновляется, только если я отправляю форму во второй раз. Почему это происходит? 

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-адреса, и при отправке он будет собирать определенную информацию, необходимую приложению, однако он будет обновлять только те журналы консоли. значения, если я нажму кнопку отправки дважды.

Ответы [ 3 ]

2 голосов
/ 05 января 2020

Проблема здесь в том, что у вас нет доступа к состоянию сразу после его установки. Таким образом, вы фактически устанавливаете состояние, и оно есть, но вы видите обновленное состояние только во второй раз, когда запускаете консольный журнал. Это не означает, что вы должны отправить дважды, но при повторной отправке вы запускаете console.log во второй раз и видите значение. Поскольку функции установки состояния имеют асин c. В этом случае вам нужно использовать функцию обратного вызова, чтобы фактически увидеть обновленное состояние на консоли. Надеюсь, это поможет.

1 голос
/ 11 января 2020

Как упоминал Бора Сумер, вы пытаетесь использовать значения состояния до того, как они действительно обновятся. Вы можете сделать что-то вроде этого: 

    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);
      }
    });
0 голосов
/ 16 января 2020

Вы можете использовать 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 });
 }
}
...