Фильтруйте массив каждый раз, когда функция выполняется, и мое состояние реакции изменяется

Я работаю над проектом, который связан со списком воспроизведения, поэтому я хочу выполнить каждый раз, когда щелкается одна из песен в списке воспроизведения, изображение, прикрепленное к песне, должно быть просмотрено. Итак, у меня есть мой код таким образом...

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

Итак, что делает этот код, так это то, что он возвращает массив с изображением, но проблема в том, что он фильтрует только один раз и многократно возвращает одно и то же значение, даже если я нажимаю на другую песню, и мне нужно фильтровать каждый раз, когда я нажимаю на песни(т.е. функция выполняется).

Я пробовал фильтровать и отображать одновременно, но это не сработало. или, может быть, я недостаточно хорошо написал синтаксис.

Пожалуйста, мне нужна помощь.

Что содержит features, когда вы console.info() это?

— 11.12.2020 16:01

Он возвращает массив, содержащий данные, которые я хочу просмотреть.

— 11.12.2020 16:11

Итак, я сохранил значение данных с помощью setData(feature), поэтому затем я могу использовать данные для перехода туда, где я хочу в массиве, но на этот раз я хочу его отфильтровать..

— 11.12.2020 16:13

javascript arrays reactjs dictionary filter

11.12.2020 15:57

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

699

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы не должны каждый раз повторно получать данные из удаленного источника. Вместо этого я завернул это в собственный хук здесь (и пользовательскую функцию извлечения, чтобы упростить тестирование/насмешку).

Затем вы не должны удерживать выбранный объект в состоянии, если вам не нужно его внутренне изменить (в этом случае вы все равно должны скопировать его в атом состояния); вместо этого просто держите идентификатор.

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>

что происходит, когда ваш find() разрешился, но tourData по-прежнему равен нулю. Отображение состояния загрузки в этом случае было бы неправильным

— 18.03.2023 19:28

@Aquib задание selectedTour можно переместить после if - это вообще не имеет значения.

— 18.03.2023 20:19

11.12.2020 16:12

Ответ принят как подходящий

Переместите эти строки в новый хук useEffect. Будет срабатывать после того, как вы установите данные

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

Я попробовал это, это то же самое, функция работает, но только один раз, даже если я снова нажму на песню, все равно будет отображаться один и тот же файл снова и снова, что означает, что он не был обновлен, вот в чем проблема ..

— 11.12.2020 16:56

11.12.2020 16:18