Reactjs 重新加载状态，但不进行渲染_Reactjs_Redux_React Redux

Reactjs 重新加载状态，但不进行渲染

reactjs redux

Reactjs 重新加载状态，但不进行渲染,reactjs,redux,react-redux,Reactjs,Redux,React Redux,所以我从服务器端获取数据。状态正在redux中加载，但react不会呈现处于状态的数组以下是我的react组件： import React, { useEffect, useState } from "react"; import { IonContent, IonButton, IonButtons, IonToolbar, IonTitle, IonHeader, IonList } from "@ionic/react"; import { II

所以我从服务器端获取数据。状态正在redux中加载，但react不会呈现处于状态的数组

以下是我的react组件：

import React, { useEffect, useState } from "react";
import { IonContent, IonButton, IonButtons, IonToolbar, IonTitle, IonHeader,  IonList } from "@ionic/react";
import { IInviteModal, IInviteReduxProps } from "../types/interfaces";
import { connect } from "react-redux";
import {getInvites} from '../flux/actions/eventActions';
import InviteListItem from "./InviteListItem";

const InviteModal = ({ getInvites, invite, onDismissModal}: IInviteModal) => {
  
// const [invites, setInvites] = useState();

  useEffect(() => { 
    getInvites(); 
  }, [getInvites]);

  // const { invites } = invite;
  const {invites}  = {...invite}

  const handleOnSubmit = (e: any) => {
      e.preventDefault();
 };
    
  return (
        <IonContent>
          <form onSubmit={handleOnSubmit}>
              <IonHeader>
              <IonToolbar>
                <IonButtons slot="start">
                    <IonButton 
                    onClick={onDismissModal}
                    >
                        Back
                    </IonButton>
                </IonButtons>
              <IonTitle>
                <div className="ion-text-center">
                Event Invites
                </div>
              </IonTitle>
            </IonToolbar>
            </IonHeader>
            <IonList>
                {
                invites ? 
                invites.map(invite => <InviteListItem 
                invite={invite}
                key={invite._id}
                />
                )
                : "Loading..."
              }
            </IonList>
          </form>
          </IonContent>
  );
};

const mapStateToProps = (state: IInviteReduxProps) => ({
  invite: state.invite
});

export default connect(mapStateToProps, { getInvites })(InviteModal);

import React from 'react';
import {  IonItem, IonLabel, IonButton, IonGrid, IonRow, IonCol } from '@ionic/react';
import {connect} from 'react-redux';
import {setCurrentI} from '../flux/actions/eventActions';
import { IInviteListItem } from '../types/interfaces';
import {format} from "date-fns";
 
const InviteListItem = ({ invite, setCurrentI }: IInviteListItem) => {

  const setCurrentInvite = (invite: any) => {setCurrentI(invite)};

  return (
          <div>          
              <IonItem
              onClick={() => setCurrentInvite(invite)}
              >
                <IonLabel>
                <h2>{invite.title}</h2>
                <p>{invite.location}</p>
                <br />
                <p>{format(new Date(invite.dateStart), "MMM d', 'h:mm aaa")}&mdash;&nbsp;
                  {format(new Date(invite.dateEnd), "MMM d', 'h:mm aaa")}</p>
                  {/* <br /> */}
                  <div className="ion-text-center">
                <IonGrid>
                  <IonRow>
                    <IonCol>
                      <IonButton size="small" fill="clear">
                      Accept
                      </IonButton>
                    </IonCol>
                    <IonCol>
                      <IonButton size="small" fill="clear">
                      _
                      </IonButton>
                    </IonCol>
                    <IonCol>
                      <IonButton size="small" fill="clear">
                      Decline
                      </IonButton>
                    </IonCol>
                  </IonRow>
                </IonGrid>
                </div>
                </IonLabel>
              </IonItem>
        </div>      
  );
};

export default connect(null, {setCurrentI})(InviteListItem);

页面仅显示“正在加载…”

奇怪的是，我使用完全相同的结构来获取其他数据和数组映射，没有问题

关于如何让数组渲染有什么想法吗

以下是有效的代码：

import React, { useEffect } from 'react';
import { IonContent, IonLabel, IonList } from '@ionic/react';
import {connect} from 'react-redux';
import {getEvents} from '../flux/actions/eventActions';
import { IEventReduxProps, ICalendar } from '../types/interfaces';
import EventListItem from './EventListItem';


const Calendar = ({ getEvents, event }: ICalendar) => {

  useEffect(() => { 
    getEvents(); 
  }, [getEvents]);
 
  const { events } = event;

  return (
    <IonContent>
      <IonList>
          {events.map(event => <EventListItem 
          event={event} 
          key={event._id}/>
          )
          }
      </IonList>
    </IonContent>
  );
};

const mapStateToProps = (state: IEventReduxProps) => ({
  event: state.event
});

export default connect(mapStateToProps, { getEvents })(Calendar);

import React from 'react';
import {  IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react';
import {connect} from 'react-redux';
import {deleteEvent, setCurrent} from '../flux/actions/eventActions';
import { IEventListItem } from '../types/interfaces';
import { closeCircle } from 'ionicons/icons';
import {format} from "date-fns";

const EventListItem = ({ event, deleteEvent, setCurrent }: IEventListItem) => {

  const handleDelete = (_id: string) => {deleteEvent(_id);};
  const setCurrentEvent = (event: any) => {setCurrent(event);};

  return (
          <div>          
              <IonItem  
              onClick={() => setCurrentEvent(event)}
              // routerLink={`/event/${event._id}`}          
              >
                <IonLabel>
                <h2>{event.title}</h2>
                <p>{event.location}</p>
                <p>{format(new Date(event.dateStart), "MMM d', 'h:mm aaa")}&mdash;&nbsp;
                  {format(new Date(event.dateEnd), "MMM d', 'h:mm aaa")}</p>
                  {/* MAP the ATTENDEES */}
                  {event.attendees.map((attendee, _id)=> (
                  <p key={attendee._id} >
                    {attendee.name}
                    {/* {attendee.email} */}
                  </p>
                  )
                  )}
                </IonLabel>
                <IonButton
                routerLink={`/event/log/${event._id}`}
                color="success"
                fill="clear"
                >Log</IonButton>
                
                <IonButton
                routerLink={`/event/${event._id}`}
                fill="clear"
                >Edit</IonButton>
                <IonIcon 
                    icon={closeCircle} 
                    slot="end"
                    className="remove-btn"
                    color="danger"
                    onClick={() => handleDelete(event._id)}
                    />
              </IonItem>
        </div>      
  );
};



export default connect(null, { deleteEvent, setCurrent })(EventListItem);

import React，{useffect}来自“React”；
从'@ionic/react'导入{IonContent，IonLabel，IonList}；
从'react redux'导入{connect}；
从“../flux/actions/eventActions”导入{getEvents}；
从“../types/interfaces”导入{IEventReduxProps，ICalendar}；
从“/EventListItem”导入EventListItem；
常量日历=（{getEvents，event}:ICalendar）=>{
useffect（（）=>{
getEvents（）；
}，[getEvents]）；
const{events}=event；
返回(
{events.map（event=>
)
}
);
};
常量mapStateToProps=（状态：IEVenturedExprops）=>({
事件：state.event
});
导出默认连接（MapStateTops，{getEvents}）（日历）；
从“React”导入React；
从'@ionic/react'导入{IonItem、IonIcon、IonLabel、IonButton}；
从'react redux'导入{connect}；
从“../flux/actions/eventActions”导入{deleteEvent，setCurrent}；
从“../types/interfaces”导入{IEventListItem}；
从“ionicons/icons”导入{closeCircle}；
从“日期fns”导入{format}；
const EventListItem=（{event，deleteEvent，setCurrent}:IEventListItem）=>{
const handleDelete=（_id:string）=>{deleteEvent（_id）；}；
const setCurrentEvent=（事件：any）=>{setCurrent（事件）；}；
返回(
setCurrentEvent（事件）}
//routerLink={`/event/${event.\u id}`}
>
{event.title}
{event.location}
{格式（新日期（event.dateStart），“mmmd”，“h:mmaaa”）}&mdash；
{格式（新日期（event.dateEnd），“mmmd”，“h:mmaaa”）}
{/*映射与会者*/}
{event.attendes.map（（attendee，_id）=>(

{attendee.name}
{/*{attendee.email}*/}

)
)}
日志
编辑
handleDelete（事件编号）}
/>
);
};
导出默认连接（null，{deleteEvent，setCurrent}）（EventListItem）；

如果在

redux存储中有数据

，则必须从

react redux

中添加

useSelector（）

这样，当应用程序中出现新的

道具时，您将通知组件，这将导致组件使用新数据重新渲染
问题还在于，您使用的是来自“react redux”的import{connect}
和挂钩

您必须决定是否要将redux
与hooks
或class
一起使用
如果要将其与挂钩一起使用，则需要：useSelector
，useActions

如果要将其与类组件一起使用，则需要从redux:mapStateToProps
，mapDispatchToProps
，connect

简而言之：您混合了两种不同的方法。
我想您在连接方面遇到了一些问题。HOC有4个参数。特殊的
我还没有发现你的问题。你能试试下面两种成分吗
如果这段代码没有帮助-我想你的问题在减速机，动作，中间件
请访问modal.tsx
从“React”导入React；
从“react-redux”导入{useSelector，useDispatch}；
从'@ionic/react'导入{IonContent，IonButton，IonButton，IonToolbar，IonTitle，IonHeader，IonList}；
从“../flux/actions/eventActions”导入{getinvests}；
从“../types/interfaces”导入{IInviteModal，IInviteReduxProps}；
从“/InviteListItem”导入InviteListItem；
/*TODO:创建正确的IInviteModal*/
const InviteModal:React.FC=（{onDismissModal}）=>{
const dispatch=usedpatch（）；
const{invites}=useSelector（{invite}:IInviteReduxProps）=>invite）；
React.useffect（（）=>{
调度（getinvests（））；
}，[发送]；
const handleOnSubmit=React.useCallback（（e:any）=>{
e、 预防默认值（）；
}, []);
返回(
返回
活动邀请
{
邀请
？invites.map（invite=>）
：“正在加载…”
}
);
};
导出默认模式；

InviteListItem.tsx
从“React”导入React；
从'@ionic/react'导入{IonItem，IonLabel，IonButton，IonGrid，IonRow，IonCol}；
从'react redux'导入{useDispatch}；
从“日期fns”导入{format}；
从“../flux/actions/eventActions”导入{setCurrentI}；
从“../types/interfaces”导入{IInviteListItem}；
const formatData=（数据：字符串）=>格式（新日期（数据），“mmmd”，“h:mmaaa”）；
/*TODO:生成正确的IInviteListItem*/
const InviteListItem:React.FC=（{invite}）=>{
const dispatch=usedpatch（）；
const setCurrentInvite=React.useCallback（（）=>{
派遣（setCurrentI（邀请））；
}，[邀请，派遣]；
返回(
{invite.title}
{invite.location}



{formatData（invite.dateStart）}
&mdash；
{formatData（invite.dateEnd）}

接受
import React, { useEffect } from 'react';
import { IonContent, IonLabel, IonList } from '@ionic/react';
import {connect} from 'react-redux';
import {getEvents} from '../flux/actions/eventActions';
import { IEventReduxProps, ICalendar } from '../types/interfaces';
import EventListItem from './EventListItem';


const Calendar = ({ getEvents, event }: ICalendar) => {

  useEffect(() => { 
    getEvents(); 
  }, [getEvents]);
 
  const { events } = event;

  return (
    <IonContent>
      <IonList>
          {events.map(event => <EventListItem 
          event={event} 
          key={event._id}/>
          )
          }
      </IonList>
    </IonContent>
  );
};

const mapStateToProps = (state: IEventReduxProps) => ({
  event: state.event
});

export default connect(mapStateToProps, { getEvents })(Calendar);

import React from 'react';
import {  IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react';
import {connect} from 'react-redux';
import {deleteEvent, setCurrent} from '../flux/actions/eventActions';
import { IEventListItem } from '../types/interfaces';
import { closeCircle } from 'ionicons/icons';
import {format} from "date-fns";

const EventListItem = ({ event, deleteEvent, setCurrent }: IEventListItem) => {

  const handleDelete = (_id: string) => {deleteEvent(_id);};
  const setCurrentEvent = (event: any) => {setCurrent(event);};

  return (
          <div>          
              <IonItem  
              onClick={() => setCurrentEvent(event)}
              // routerLink={`/event/${event._id}`}          
              >
                <IonLabel>
                <h2>{event.title}</h2>
                <p>{event.location}</p>
                <p>{format(new Date(event.dateStart), "MMM d', 'h:mm aaa")}&mdash;&nbsp;
                  {format(new Date(event.dateEnd), "MMM d', 'h:mm aaa")}</p>
                  {/* MAP the ATTENDEES */}
                  {event.attendees.map((attendee, _id)=> (
                  <p key={attendee._id} >
                    {attendee.name}
                    {/* {attendee.email} */}
                  </p>
                  )
                  )}
                </IonLabel>
                <IonButton
                routerLink={`/event/log/${event._id}`}
                color="success"
                fill="clear"
                >Log</IonButton>
                
                <IonButton
                routerLink={`/event/${event._id}`}
                fill="clear"
                >Edit</IonButton>
                <IonIcon 
                    icon={closeCircle} 
                    slot="end"
                    className="remove-btn"
                    color="danger"
                    onClick={() => handleDelete(event._id)}
                    />
              </IonItem>
        </div>      
  );
};



export default connect(null, { deleteEvent, setCurrent })(EventListItem);