React本机应用程序中重新呈现限制的DispatchAction错误

Question

我在这里做错什么了吗？我正在尝试获取一些数据，但是它在控制台日志中返回了错误，并说明了一些有关重新渲染的问题

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>
  );
}

抓取上下文文件：

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.'
      })
    }
  }
}

我在后端获得了数据以正确响应，但是在前端无法完成其预期的工作。 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 …

直到我将鼠标悬停在它上面时，它才产生完整的错误...说出更多关于“防止无限循环...”的内容，这是屏幕截图：

Answer 1

似乎每个渲染都将剪贴板设置为新值，从而在每个新渲染中触发useEffect，从而导致无限循环。我是新来的本地人，我自己一直遭受无限循环的困扰。不确定是否有助于将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]);