问题：为什么导航似乎改变readyState了以前EventSource的s？

================================================

说明：我正在开发一个前端（React），用户可以在其中输入一系列搜索查询（即字符串），对于每个搜索查询，我的后端（Flask）将返回一系列 URL。对于每个搜索查询，我决定通过EventSource. 具体来说，我首先创建了一个 React 状态数组backendEventSources：

const [backendEventSources, setBackendEventSources] = useState([]);

然后我更新backendEventSources新prompt来的时候：

  useEffect(() => {

    console.log('Inside useEffect')

    // Take 0 for the newest prompt.
    const newBackendEventSource = new EventSource(
      `https://localhost:8080/generate?counter=${promptsResultsArray[0].counter}&prompt=${promptsResultsArray[0].prompt}`,
      {withCredentials: false})

    newBackendEventSource.addEventListener('open', () => {
      console.log('SSE opened!');
    });

    newBackendEventSource.addEventListener('error', (e) => {
      console.log('SSE error!');
      console.error('Error: ',  e);
    });

    newBackendEventSource.addEventListener('close', (e) => {
      console.log('SSE closed!');
      const data = JSON.parse(e.data);
      console.log("close data: ", data);
      newBackendEventSource.close();
    });

    newBackendEventSource.addEventListener('message', (e) => {
      const data = JSON.parse(e.data);
      console.log("message data: ", data);
      // https://stackoverflow.com/a/47580775/4570472
      const newPromptsResultsArray = [...promptsResultsArray];
      // Since we preprend new results, we need to compute the right index from
      // the counter with the equation: length - counter - 1.
      // e.g., For counter 2 of a length 3 array, we want index 0.
      // e.g., For counter 2 of a length 4 array, we want index 1.
      // Recall, the counter uses 0-based indexing.
      const index = newPromptsResultsArray.length - data.counter - 1
      newPromptsResultsArray[index].URIs = [data.uri];
      newPromptsResultsArray[index].isLoading = false;
      setPromptsResultsArray(newPromptsResultsArray);

      // Instantiating the element and setting the src property starts preloading the image.
      // for (const newImgURI of newImgURIs) {
      //   const imageElement = new Image();
      //   imageElement.src = newImgURI;
      // }
      // setTimeout(() => {setImgURIs(newImgURIs)}, 8000);
    });

    // Add new backend event source to state for persistence.
    setBackendEventSources(backendEventSources => [
      newBackendEventSource,
      ...backendEventSources])

    return () => {
      newBackendEventSource.close();
    };

  }, [prompt]);

我使用 URL 参数进行 React 导航：

  const navigateToGenerateResults = (promptString) => {
    console.log('Adding new prompt results to promptsResultsArray');

    // State doesn't update immediately (or even synchronously). To ensure we can immediately
    // access the new values, we create a newPromptsResults.
    // https://stackoverflow.com/a/62900445/4570472
    const newPromptsResults = {
      isLoading: true,
      prompt: promptString,
      counter: promptsResultsArray.length,
      URIs: ["https://simtooreal-public.s3.amazonaws.com/white_background.png"]
    }

    // Prepend the new prompt to our promptsResultsArray
    // https://stackoverflow.com/a/60792858/4570472
    setPromptsResultsArray(promptsResultsArray => [
      newPromptsResults, ...promptsResultsArray])
    console.log('Setting prompt to: ' + newPromptsResults.prompt)
    setPrompt(newPromptsResults.prompt)
    console.log('Navigating from /generate to /generate with prompt: ' + newPromptsResults.prompt)
    navigate(`/generate?counter=${newPromptsResults.counter}&prompt=${newPromptsResults.prompt}`)
  }

但是，我发现，一旦我从一个 URL 导航到另一个 URL，前一个EventSource的就绪状态就会从 0/1 切换到 2。此外，我的newBackendEventSource.addEventListener('close'函数永远不会被触发。

为什么导航似乎改变readyState了以前EventSource的s？