Question

  const { categoryId } = useParams();
  const { clinicsById, clinicsList, loading } = useSelector(
    (state) => state.clinics
  );
  const clinics = clinicsList.map((clinicId) => clinicsById[clinicId]);

  useEffect(() => {
    dispatch(fetchClinicsForCategory({ categoryId }));
  }, [categoryId, dispatch]);

  return <div>{clinics}</div>;

基本上，此组件根据categoryId显示不同的数据。但是在第一个渲染之后，随后对不同categoryId的渲染将显示先前的状态。在这种情况下，我相信显示先前渲染的状态时无需等待新状态的到来。 FetchClinicsForCategory（）进行API调用以获取新数据。如何始终显示最新数据？当我将诊所打印到控制台时，我可以看到新数据已经到达。

https://streamable.com/5m5o6u

这是化简器代码。我的动作是调用一个API并获取数据并将其传递给reducer。

getClinicsSuccess(state, action) {
      const clinics = action.payload;
      state.loading = false;
      state.clinicsList = clinics.map((clinic) => clinic.clinicId);

      clinics.forEach((clinic) => {
        state.clinicsById[clinic.clinicId] = clinic;
      });
    }

编辑：添加了该问题的记录。您可以看到，即使我单击具有1个服务的类别，它也会显示上次渲染页面以来的多个服务。

编辑：添加了减速器代码。

Answer 1

所以Redux没问题... 我有一个单独的状态，其中保留了经过筛选的诊所的列表，该列表就是要呈现的列表，而不是我的实际新数据。我需要重做逻辑。感谢您的建议！

无法在React App中从我的Redux存储获取最新数据

1 个答案: