api 当 url_slug 在 React Hook 中发生变化时数据没有变化

Question

我每次都在尝试更改数据，url_slug正在更改但数据没有刷新。获取相同的数据。

const [relatedSnippets,setrelatedSnippets] = useState([]);
const [loading,setLoading] = useState(false);

useEffect(async ()=>{
      setLoading(true);
      const snippetData = await getData(url_slug); 
      setrelatedSnippets(snippetData.snippets);
      setLoading(false);
 },[url_slug]);
  
 async function getData(url_slug) {
    var config = {
      headers: {
        accept: '*/*',
        'Content-Type': 'application/json',
        'API_ACCESS_KEY': 'hns2V0Ddbkkn8r1XLq3Kw7ZoiBTR0nmA',
      }
    };
    const data = {
      slug:url_slug,
    }
  
    const url = `http://localhost:8000/api/similarsnippets`;
    
    const snippetData = await axios.post(url,data,config);
    const finalData = snippetData.data;
    return finalData;
  }

Answer 1

useEffect 挂钩的回调需要是一个同步函数。将 async 函数移动到回调中，然后调用它。

useEffect(() => {
  const loadData = async () => {
    setLoading(true);
    const snippetData = await getData(url_slug); 
    setrelatedSnippets(snippetData.snippets);
    setLoading(false);
  };

  loadData();
}, [url_slug]);

api 当 url_slug 在 React Hook 中发生变化时数据没有变化

api data not changing when url_slug is changing in react hook

reactjs

react-hooks

use-effect