第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

每次執(zhí)行函數(shù)并且我的反應(yīng)狀態(tài)發(fā)生變化時(shí)過(guò)濾數(shù)組

每次執(zhí)行函數(shù)并且我的反應(yīng)狀態(tài)發(fā)生變化時(shí)過(guò)濾數(shù)組

牛魔王的故事 2023-11-12 15:37:00
我正在開(kāi)發(fā)一個(gè)與播放列表有關(guān)的項(xiàng)目,所以我想要執(zhí)行的是,每當(dāng)單擊播放列表中的一首歌曲時(shí),就應(yīng)該查看附加到該歌曲的圖像。所以,我的代碼是這樣的......const Component = () => {  const value = useContext(DataContext);  const [data, setData] = useState(null);  const [currentData, setCurrentData] = useState(null);  useEffect(() => {    const url =      "https://52-90-82-235.maverickmaven.com/geotourdata/json.cfm?h=-107,37,s,en,3A771765";    const currentValue = value;    axios({      method: "get",      url,      responseType: "stream",    }).then((response) => {      let features = response.data.features.filter((elem) => {        return elem.type === "Feature";      });      setData(features);      const currentDatafile = data?.filter((data) => {        return data?.assets[0].audio === value;      });      setCurrentData(currentDatafile);    });  }, [setCurrentData]);};所以,這段代碼的作用是返回包含圖片的數(shù)組,但問(wèn)題是它只過(guò)濾一次,即使我點(diǎn)擊另一首歌曲,它也只會(huì)重復(fù)返回相同的值,而且我每次點(diǎn)擊時(shí)都需要它進(jìn)行過(guò)濾在歌曲上(即執(zhí)行該函數(shù))。我嘗試同時(shí)過(guò)濾和映射,但沒(méi)有成功。或者也許我的語(yǔ)法寫(xiě)得不夠好。
查看完整描述

2 回答

?
千萬(wàn)里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊

將這些行移至新的 useEffect 掛鉤。設(shè)置數(shù)據(jù)后會(huì)觸發(fā)


useEffect(() => {

  const currentDatafile = data?.filter((item) => {

    return item.assets[0].audio === value;

  });

  setCurrentData(currentDatafile)},[data])


查看完整回答
反對(duì) 回復(fù) 2023-11-12
?
人到中年有點(diǎn)甜

TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊

您不應(yīng)該每次都從遠(yuǎn)程源重新獲取數(shù)據(jù)。我已將其包裝在自定義掛鉤中,在這里(以及自定義獲取器函數(shù)以使測(cè)試/模擬更容易)。


然后,您不應(yīng)該將選定的對(duì)象保持在狀態(tài)中,除非您需要在內(nèi)部修改它(在這種情況下,無(wú)論如何您都應(yīng)該將其復(fù)制到狀態(tài)原子中);相反,只需持有 ID 即可。


function fetchTourData() {

  return fetch('https://52-90-82-235.maverickmaven.com/geotourdata/json.cfm?h=-107,37,s,en,3A771765')

    .then(response => response.json())

    .then(data => data.features.filter((elem) => elem.type === 'Feature'));

}


function useTourData() {

  const [data, setData] = React.useState(null);

  React.useEffect(() => {

    fetchTourData().then(setData);

  }, [setData]);

  return data;

}


const Component = () => {

  const tourData = useTourData();

  const [selectedId, setSelectedId] = React.useState(null);

  const selectedTour = (tourData || []).find(t => t.id === selectedId);

  if (tourData === null) {

    return <div>Loading</div>

  }

  return (

    <div>

      <div>

        Selected: {JSON.stringify(selectedTour || "nothing")}

      </div>

      <ul>

        {tourData.map(t => <li key={t.id}><a href="#" onClick={() => setSelectedId(t.id)}>{t.name}</a></li>)}

      </ul>

    </div>

  );

};


ReactDOM.render(<Component />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>


查看完整回答
反對(duì) 回復(fù) 2023-11-12
  • 2 回答
  • 0 關(guān)注
  • 170 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)