ошибка dispatchAction пределов перерисовки в реагирующем собственном приложении - PullRequest
Новая
       13

ошибка dispatchAction пределов перерисовки в реагирующем собственном приложении

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

Я что-то здесь не так делаю? Я пытаюсь получить некоторые данные, но они возвращают ошибки в моем журнале консоли, что-то говорит о перерисовке

mycompontent: 

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')){
        console.log('inside includes');
        setGoogleClip(true);
        setClipboard(content);
        setGoogleLink(`${content.split('?')[0]}?somedata`);
      } else {
        setGoogleClip(false);
      }
    });

    if (googleClip) {
      scrape({ googleLink });
    }
  }

  useEffect(() => {
    urlFromClipboard();
  }, [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>
  );
}

scrape context file: 

const scrape = (dispatch) => {
  console.log('dispatch scrape', dispatch)
  return async ({googleLink}) => {
    console.log('scrape googleLink',googleLink);
    try {
      const response = await googleApi.post('/googleLink', {googleLink});
      dispatch({ type: 'googleLink', payload: response });
      navigate('NewPage');
    } catch (error) {
      dispatch({
        type: 'googleLink_error',
        payload: 'Please submit correct Google link.'
      })
    }
  }
}

Я получил данные в своем бэкэнде для правильного ответа, но он не в состоянии завершить sh то, что предполагалось, на стороне внешнего интерфейса. console.log('dispatch scrape', dispatch) выдает мне ошибку в моей консоли: 

dispatch scrape function dispatchAction(fiber, queue, action) {
        (function () {
          if (!(numberOfReRenders < RE_RENDER_LIMIT)) {
            throw ReactError(Error("Too many re-renders. React limits the number …

Она не выдает полную ошибку, пока я не наведу на нее курсор ... не скажу больше ", чтобы предотвратить бесконечность l oop ... "Вот скриншот:

enter image description here

1 Ответ

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

похоже, что каждый рендер устанавливает новое значение в буфере обмена, вызывая useEffect в каждом новом рендере, вызывая бесконечное l oop. Я новичок, чтобы реагировать нативно, и я очень страдал от бесконечного я oop сам. Не уверен, что это помогает изменить зависимость useEffect от функции urlFromClipboard и обернуть urlFromClipboard в функцию обратного вызова, конечно же, установить буфер обмена как зависимость функции обратного вызова: 

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

  if (googleClip) {
    scrape({ googleLink });
  }
}, [clipboard])

useEffect(() => {
  urlFromClipboard();
}, [urlFromClipBoard]);
...