【问题标题】：How to use useEffect on button Click?如何在按钮单击上使用useEffect？
【发布时间】：2021-10-05 17:52:54
【问题描述】：

只有当用户click on Search Button 时我才调用useEffect / Fetch the data 否则不获取数据..

代码：

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 帮忙解决...

【问题讨论】：

你应该在useEffect之外声明你的fetchPosts函数并将它直接绑定到button点击。无需使用useEffect 和额外的状态space

标签： javascript reactjs function fetch use-effect

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用 useCallback 而不是 useEffect

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

【讨论】：

【解决方案3】：

您必须将 fetchPosts 设置在 useEffect 之外。然后，您可以使用新状态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;

【讨论】：