react native应用程序中重新渲染限制的dispatchAction错误答案

【问题标题】：dispatchAction error of rerender limits in react native applicationreact native应用程序中重新渲染限制的dispatchAction错误
【发布时间】：2020-01-10 17:38:44
【问题描述】：

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

我的组件：

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 …

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

【问题讨论】：

标签： reactjs react-native error-handling react-hooks

【解决方案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]);

【讨论】：