如何在按钮点击上使用useEffect？

Question

我必须调用 useEffect / Fetch the data 仅当用户 click on Search Button 否则无法获取数据..

代码：

const App = () => {

const[datas,setDatas] = useState([]) 

const [space,setSpace] = useState(null)
const [print, setPrint] = useState(false)


function getData(val){
 // console.log(val.target.value)
  setSpace(val.target.value);
  setPrint(false)
}

// console.log(space)  

  useEffect(() => {
    const fecthPosts = async () => {
      let initial_url = `http://localhost:4000/search` 
      let url = initial_url + "?text=" + space  
       
       const res = await fetch(url);
       const {result} = await res.json();

     setDatas(result);
    fecthPosts();     //I've to call this fetchPosts() when Btn is CLicked
  },[space]);

return(
 <div className="App">
     {                  //Displaying on search
        print?
         <>
        <h2>{space}</h2>  
        <div> 
       {datas.map((field) => 
       <p>{field.title}</p> 
       <p>{field.author}</p> 
       )}
        </div>
        </>
        :null
      }
   <input type="text" onChange={getData} />
   <button onClick={() => { setSpace(true); fetchPosts() }}>search</button>
 </div>
  )
 }
};

export default App;

它不工作错误：

 fetchPosts() is not defined...

我也试过这样：

function trigger(){
  useEffect(() => {
    const fecthPosts = async () => {
      let initial_url = `http://localhost:4000/search` 
      let url = initial_url + "?text=" + space  
       
       const res = await fetch(url);
       const {result} = await res.json();

     setDatas(result);
    fecthPosts();     //I've to call this fetchPosts() when Btn is CLicked
  },[space]);
}

<button onClick={() => { setSpace(true); trigger() }}>search</button>

它不工作错误：

 React Hook useEffect has unnecessary dependencies:'space'

/PLZZ帮忙出...

Answer 1

为 api 调用创建一个单独的函数，在您的 UseEffect 函数中调用该函数，然后在 Button click 函数上调用 Api 函数，它会自动获取数据

Answer 2

使用 useCallback 而不是 useEffect

useCallback 类似于 useEffect，但适用于函数需要回调的情况，例如您在此处所做的 onClick。 useEffect 用于响应某些道具更改而不是用户采取的操作。

Answer 3

您必须在 useEffect 之外设置您的 fetchPosts。然后，您可以使用新状态 search 来跟踪对按钮的任何点击。

const App = () => {
  const [datas, setDatas] = useState([]);
  const [space, setSpace] = useState(null);
  const [print, setPrint] = useState(false);
  const [search, setSearch] = useState(false);

  const fetchPosts = async () => {
    let initial_url = `http://localhost:4000/search`;
    let url = initial_url + "?text=" + space;

    const res = await fetch(url);
    const { result } = await res.json();
    setDatas(result);
  };

  function getData(val) {
    setSpace(val.target.value);
    setPrint(false);
  }

  useEffect(() => {
    fetchPosts(); // fecthPosts is called each time space changed
  }, [search]);

  return (
    <div className="App">
      {
        //Displaying on search
        print ? (
          <>
            <h2>{space}</h2>
            <div>
              {datas.map((field) => (
                <>
                  <p>{field.title}</p>
                  <p>{field.author}</p>
                </>
              ))}
            </div>
          </>
        ) : null
      }
      <input type="text" onChange={getData} />
      <button onClick={() => setSearch(!search)}>search</button>
    </div>
  );
};

export default App;

如何在按钮点击上使用useEffect？

How to use useEffect on button Click?

javascript

function

fetch

reactjs

use-effect

使用 useCallback 而不是 useEffect