Блог

У меня есть модель событий. на моем мероприятии пользователи могут указать, что они посещают мероприятие, нажав кнопку, и когда они укажут, что они посещают мероприятие, нажав кнопку, из другого компонента появится модальное диалоговое окно с вопросом, хотят ли они также привести друзей на мероприятие, если они скажут «Да», им будет предложено выбрать, сколько человек они хотят привести, и они выберут из выпадающего списка номеров и отправят. после отправки всего, это будет плюс люди, которые приходят, и со сколькими людьми приходит пользователь, затем покажите их вместе. модель событий имеет атрибуты going и coming_with, которые хранят данные о людях, которые приходят, и о людях, которые приходят вместе.

Примечание: модальное диалоговое окно из другого компонента, который мне требуется внутри моего компонента событий.

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

Как мне заставить браузер обновлять их автоматически, не обновляя страницу?

Вот моя ссылка на песочницу,https://codesandbox.io/s/compassionate-sanne-pmmx6?file=/event-comments.component.js

Я думаю, вы поймете, о чем я говорю, после того, как посетите сайт

Интегрируйте Redux store в ваше приложение React.

РЕШЕНИЕ: 1

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

После появления модальных данных, какие бы данные вы ни выбрали и в которых их разместили api , обновите свой редуктор локально. Поскольку этот редуктор будет связан с главной страницей, данные будут Updated .

РЕШЕНИЕ: 2

Введите некоторую переменную в редуктор, допустим isUpdate , сделайте ее true при обновлении данных из Modal . и на вашей главной странице события используйте перехват следующим образом, чтобы снова извлечь данные из api, и, следовательно, будут показаны обновленные данные.

 useEffect(() => {
 if(isUpdate) 
 // fetchDataFromAPI
},[])
  

Спасибо всем, но я решил эту проблему с помощью событий, происходящих после вызова API. я видел пример на странице Facebook React.

 const [events, setEventData] = useState([]);

 useEffect(() => {
axios
  .get(
    "https://cryptic-shelf-72177.herokuapp.com/events/"  
      props.match.params.id  
      "/eventcomments"
  )

  .then((response) => {
    setEventData(response.data);
  })

  .catch(function (error) {
    console.log(error);
  });
}, [events]);