Reactjs axios的另一个无限useEffect（）循环

在学习钩子和其他很多东西时，我在使用useEffect时陷入了一个无限循环。我尝试了这里给出的所有答案，但都没有实现

我想知道更多，因为我以前的应用程序正在运行。将把代码放在他们两人身上。也许有人能帮我解决这个问题

如果有些人对这些应用程序很熟悉，那么是的，它们来自udemy课程，但在这里它们是使用setState和class制作的

编辑：

已从中删除对象{}

  useEffect(() => {
    onTermSubmit({});
  }, [])

我在搜索答案时添加了它

无限循环应用程序：

App.js

import React, { useState, useEffect } from 'react';
import SearchBar from "./SearchBar";
import youtube from "../apis/youtube";
import VideoList from "./VideoList";

const App = () => {
  const [videos, setVideos] = useState([]);

  const onTermSubmit = async (textInput) => {
    const response = await youtube.get("/search", {
      params: { q: textInput }
    });
    setVideos(response.data.items);
  }

  useEffect(() => {
    onTermSubmit();
  }, [])

  return (
    <div className="ui container">
      <SearchBar onFromAppSubmit={onTermSubmit} />
      <VideoList foundVideos={ videos } />
    </div>
  );
}

export default App;

import React, { useState, useEffect } from 'react';
import unsplash from "../api/Unsplash";
import SearchBar from "./SearchBar";
import ImageList from "./ImageList";


const App = () => {
  const [images, setImages] = useState([]);

  const onSearchSubmit = async (inputText) => {
    const response = await unsplash.get("/search/photos", {
      params: { query: inputText},
    });
    setImages(response.data.results);
  }

  useEffect(() => {
        onSearchSubmit();
  }, [])

  return (
    <div className="ui container" style={{marinTop: "10px"}}>

      <SearchBar whenSubmitted={onSearchSubmit} />
      <ImageList foundImages={images}/>
    </div>
  );
}

export default App;

和我的工作应用程序：

App.js

import React, { useState, useEffect } from 'react';
import SearchBar from "./SearchBar";
import youtube from "../apis/youtube";
import VideoList from "./VideoList";

const App = () => {
  const [videos, setVideos] = useState([]);

  const onTermSubmit = async (textInput) => {
    const response = await youtube.get("/search", {
      params: { q: textInput }
    });
    setVideos(response.data.items);
  }

  useEffect(() => {
    onTermSubmit();
  }, [])

  return (
    <div className="ui container">
      <SearchBar onFromAppSubmit={onTermSubmit} />
      <VideoList foundVideos={ videos } />
    </div>
  );
}

export default App;

import React, { useState, useEffect } from 'react';
import unsplash from "../api/Unsplash";
import SearchBar from "./SearchBar";
import ImageList from "./ImageList";


const App = () => {
  const [images, setImages] = useState([]);

  const onSearchSubmit = async (inputText) => {
    const response = await unsplash.get("/search/photos", {
      params: { query: inputText},
    });
    setImages(response.data.results);
  }

  useEffect(() => {
        onSearchSubmit();
  }, [])

  return (
    <div className="ui container" style={{marinTop: "10px"}}>

      <SearchBar whenSubmitted={onSearchSubmit} />
      <ImageList foundImages={images}/>
    </div>
  );
}

export default App;

SearchBar.js

import React, { useState } from "react";

const SearchBar = ({onFromAppSubmit}) => {
    const [textInput, setTextInput] = useState("");

    const onTextInputChange = event => {
        setTextInput(event.target.value);
    }

    const onFormSubmit = event => {
        event.preventDefault();

        onFromAppSubmit(textInput);
    }

    return(
    <div className="search-bar ui segment">
        <form onSubmit={onFormSubmit} className="ui form">
            <div className="field">
                <label>Video Search</label>
                <input
                    type="text"
                    placeholder="Type in to search for videos"
                    value={textInput}
                    onChange={onTextInputChange}
                    />
            </div>
        </form>
    </div>
    );
}

export default SearchBar;

import React, { useState } from "react";

function SearchBar({whenSubmitted}){
    const [inputText, setInputText] = useState("");

    function onInputChange(event){
        const writtenText = event.target.value;
        setInputText(writtenText);
    }

    function onFormSubmit(event){
        event.preventDefault();         //to prevent the form to refresh the whole form

        whenSubmitted(inputText);
    }

    return (
        <div className="ui segment">
            <form onSubmit={onFormSubmit} className="ui form">
                <div className="field">
                    <label>Image Search</label>
                    <input
                        type="text"
                        value={inputText}
                        onChange={onInputChange}
                        placeholder="Search"
                    />
                </div>
            </form>
        </div>
    );
}

export default SearchBar;

---

请像这样更改SearchBar.js中的代码

onChange={(evt) => onInputChange(evt)}

---

希望这对您有所帮助。

请像这样更改SearchBar.js中的代码

onChange={(evt) => onInputChange(evt)}

---

希望这对您有所帮助。

代码看起来正确，但我不确定您为什么从app.js的useffect传递空对象。 在这里：-

---

您的函数可能需要一个字符串。

代码看起来正确，但我不确定您为什么从app.js的useffect传递空对象。 在这里：-

您的函数可能需要一个字符串。

您应该使useEffect依赖于您的searchValue，以便每次提交新的searchValue时都会触发搜索：

从React导入React，{useState，useffect}； 从导入搜索栏。/SearchBar； //从../API/youtube导入youtube； 从导入视频列表。/VideoList； 常量应用==>{ const[videos，setVideos]=useState[]； const[searchValue，setSearchValue]=useState； useEffect=>{ 异步=>{ //const response=wait youtube.get/search{ //参数：{q:textInput} // }; setVideos[searchValue，部分，随机，项]；//模拟axios连接 }; }，[searchValue]； 回来 setSearchValuenewSearchValue} /> ; }; 导出默认应用程序； 您应该使useEffect依赖于您的searchValue，以便每次提交新的searchValue时都会触发搜索：

从React导入React，{useState，useffect}； 从导入搜索栏。/SearchBar； //从../API/youtube导入youtube； 从导入视频列表。/VideoList； 常量应用==>{ const[videos，setVideos]=useState[]； const[searchValue，setSearchValue]=useState； useEffect=>{ 异步=>{ //const response=wait youtube.get/search{ //参数：{q:textInput} // }; setVideos[searchValue，部分，随机，项]；//模拟axios连接 }; }，[searchValue]； 回来 setSearchValuenewSearchValue} /> ; }; 导出默认应用程序；

---

事实证明，为了得到我想要的结果，只有在我在搜索栏中写入内容并按Enter/Return后才能显示结果，我只需要删除useEffect函数：

博比B.助教

每次渲染时都会调用useEffect，因此，当应用程序首次加载其 在没有搜索词的情况下被调用，搜索词抛出400。这个 最简单的解决方案是提供默认搜索词：

useEffect(() => {
    onSearchSubmit('cats');
  }, []);

或者，如果您没有查看，也可以将其完全从App.js中删除 用于此初始默认图像搜索功能

我从未想过，一个人可以跳过使用效果。我确信，它被用在挂钩上，作为组件安装的某种替代品

---

谢谢大家的帮助

事实证明，为了得到我想要的结果，只有在我在搜索栏中写下一些东西并按Enter/Return后才能显示结果，我只需要删除useEffect函数：

博比B.助教

每次渲染时都会调用useEffect，因此，当应用程序首次加载其 在没有搜索词的情况下被调用，搜索词抛出400。这个 最简单的解决方案是提供默认搜索词：

useEffect(() => {
    onSearchSubmit('cats');
  }, []);

或者，如果您没有查看，也可以将其完全从App.js中删除 用于此初始默认图像搜索功能

我从未想过，一个人可以跳过使用效果。我确信，它被用在挂钩上，作为组件安装的某种替代品

---

谢谢大家的帮助

是否可以显示视频列表组件，因为上面的代码似乎没有任何东西会导致无限循环？能否添加一个工作代码沙盒示例？您可以通过调用setVideos来模拟axios调用[一些，随机，项目；因为只有一个useEffect，并且其中有一个deps数组为空，将只调用一次，上面的代码没有找到任何无限循环，您是否缺少代码块的任何部分？好的，将添加我的所有代码。已经制作了一个codesandbox版本。感谢@Titlum的提示！是否可以显示您的videoList组件因为上面的代码似乎没有任何东西会导致无限loopHi，您可以添加一个工作的CodeSandbox示例吗？您可以模拟axios调用

---

---

调用setVideos[一些，随机，项目；因为只有一个useEffect，并且其中有一个deps数组为空，将只调用一次，上面的代码没有找到任何无限循环，您是否缺少代码块的任何部分？好的，将添加我的所有代码。已经制作了一个codesandbox版本。感谢@Titlum的提示！很好，我在搜索a时添加了它nswer并且在发布good point之前忘了删除它，我在搜索答案时添加了它，在发布将其更改为onChange={event=>ontdeputchangevent}之前忘了删除它但仍然没有更改：/。哦，我忘了一件事。请更改onFromSubmit。对于事件，样式需要为param=>FuncNameParam。现在将其更改为：onFormSubmitevent}className=ui form>和onChange={event=>ontExitPutChangeEvent}但没有帮助：/。无论如何，感谢您的支持：-我检查了沙盒代码，它正在工作。对于uniqui键只有一个警告，这可以通过key={index}解决。让我知道你的代码有什么问题。你是对的！如果你现在能看到我的脸…好的，我会用我的vs代码进一步调查原因：/。还感谢你的警告。将其更改为onChange={event=>onTestExputChangeEvent}但仍然没有更改：/。哦，我忘了一件事。请更改onFromSubmit。对于事件，样式需要为param=>FuncNameParam。现在将其更改为：onFormSubmitevent}className=ui form>和onChange={event=>ontExitPutChangeEvent}但没有帮助：/。无论如何，感谢您的支持：-我检查了沙盒代码，它正在工作。对于uniqui键只有一个警告，这可以通过key={index}解决。让我知道你的代码有什么问题。你是对的！如果你现在能看到我的脸…好吧，我会用我的vs代码进一步调查原因：/。还感谢警告。好吧，你的searchValue不是我的textInput吗？我从SearchBar传递它：const[textInput，setTextInput]=useState；第二件事是，甚至在我在搜索栏中键入任何内容之前，搜索结果就会显示VideoItem。textInput是搜索栏中的一个状态属性。您的UAEEEffect无法对其进行操作，这就是为什么您必须将其传播回应用程序组件。在那里，useEffect将看到它已更改，并执行视频加载使用新值。若要修复未插入搜索词时视频的加载，只需添加一个检查：如果searchValue{setVideos/*您搜索的视频*/；}或者{setVideos[]；}，但据我对我的应用程序的了解，我正在通过onFormSubmit将搜索栏中的文本输入传递到我的app.js，在那里我使用它，正如您所描述的[searchValue和setSearchValue]。还是我错了？好吧，你的searchValue不是我的textInput吗？我从搜索栏传递过来：const[textInput，setTextInput]=useState；第二件事是，甚至在我在搜索栏中键入任何内容之前，搜索结果就会显示VideoItem。textInput是搜索栏中的一个状态属性。您的UAEEEffect无法对其进行操作，这就是为什么您必须将其传播回应用程序组件。在那里，useEffect将看到它已更改，并执行视频加载使用新值。若要修复未插入搜索词时视频的加载，只需添加一个检查：如果searchValue{setVideos/*您搜索的视频*/；}或者{setVideos[]；}，但据我对我的应用程序的了解，我正在通过onFormSubmit将搜索栏中的文本输入传递到我的app.js，在那里我使用它，正如您所描述的[searchValue和setSearchValue]。还是我错了？