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

Question

I've to call useEffect / Fetch the data only when user click on Search Button otherwise not fetch the data..

Code:

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;

It's not working Error:

 fetchPosts() is not defined...

---

I've also tried like this:

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>

It's not working Error:

 React Hook useEffect has unnecessary dependencies:'space'

/PLZZ help to out...

Answer 1

为 api 调用创建一个单独的函数，并在您的 UseEffect 函数中调用该函数，然后在按钮单击函数调用 Api 函数并自动获取数据

Answer 2

Use useCallback not useEffect

useCallback is similar to useEffect but is for when a function needs a callback, like what you're doing here onClick. useEffect is used in response to some prop changing not an action taken by a user.

Answer 3

I initialized shouldFetchData = false . Once the button is clicked, I changed it's value; shouldFetchData = true . Inside useEffect I called fetchPosts() only when shouldFetchData is true .

import React, { useState } from "react";

const App = () => {

    const [datas, setDatas] = useState([])
    const [shouldFetchData, setShouldFetchData] = useState(false);
    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)  

    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
    }

    useEffect(() => {
        if(shouldFetchData) {
            fecthPosts();
        }
    }, [space]);

    return (
        <div className="App">
            {
                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);
                setShouldFetchData(true);
            }}>search</button>
        </div>
    )
};

export default App;

I found a few syntax errors in your code, so I hope I did what you intended. If This is not the proper way to do this or if there exists a better way, please let me know. I'd be happy to learn.

Answer 4

You have to set your fetchPosts outside of the useEffect . Then, you can use a new state search to track any click on the button.

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;