每次执行函数并且我的反应状态发生变化时过滤一个数组答案

【问题标题】：Filter an array every time a function is executed and my react state change每次执行函数并且我的反应状态发生变化时过滤一个数组
【发布时间】：2021-03-23 00:06:17
【问题描述】：

我正在处理一个与播放列表有关的项目，所以我想要执行的是每当单击播放列表中的一首歌曲时，都应该查看附加到歌曲的图像。所以，我的代码是这样的......

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]);
};

所以，这段代码的作用是它返回包含图片的数组，但问题是它只过滤一次，即使我点击另一首歌，它也会重复返回相同的值，我需要它来过滤每一个我点击歌曲的时间（即执行该功能）。

我尝试同时过滤和映射，但没有奏效。或者我的语法写得不够好。

我需要帮助。

【问题讨论】：

当你console.log()它时，features包含什么？
它返回一个数组，其中包含我要循环的数据。
所以，我使用 setData(feature) 保存了数据值，因此我可以使用数据导航到数组中我想要的位置，但这次我想过滤它..跨度>

标签： javascript arrays reactjs dictionary filter

【解决方案1】：

将这些行移至新的 useEffect 挂钩。设置数据后触发

useEffect(() => {
  const currentDatafile = data?.filter((item) => {
    return item.assets[0].audio === value;
  });
  setCurrentData(currentDatafile)},[data])

【讨论】：

这个我试过了，还是一样的，这个功能有效但只做了一次，即使我再次点击歌曲仍然一遍又一遍地显示相同的文件，这意味着它是'没有更新，这就是这里的问题..

【解决方案2】：

您不应该每次都从远程源重新获取数据。我已经将它包装在一个自定义钩子中，在这里（以及一个自定义提取器函数，使测试/模拟更容易）。

然后，除非您需要在内部修改它（在这种情况下，您应该将其复制到状态原子中），否则您不应该将所选对象保持在状态中；相反，只需持有 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>

【讨论】：