array.map不使用数组的设置状态更新模板

Question

我有一个userData状态，用于呈现来自用户的通知列表--一个对象数组。在列表中，我为每个通知设置了一个delete按钮，它调用一个函数来处理userData的更新，并删除数组中的通知以设置它的新状态。最后，它用正确的数据更新状态，但是在模板上它永远不会得到更新，实际上它似乎明白数组是空的.(?)

而不是进入这个如果 userData.notifications && userData..。它进入else。

//* const Notifications = () => { **/
//* ... **/
const [userData, setUserData] = useState(null);
const [isLoading, setIsLoading] = useState(true);

// handles delete
const deleteNotifications = (notificationId) => {
  setIsLoading(true);

  const user = {...userData};
  let newUserData = [];

  if(notificationId) {
    newUserData = user.notifications.filter(notification => {
      return notification.notificationId !== notificationId;
    });
  } else {
    user.notifications = [];
    newUserData = user;
  }
 
  setUserData(newUserData);
  setIsLoading(false);
}

// template
  const renderNotifications = () => {

  if(userData.notifications && userData.notifications.length) {
    return (
      <>
        { userData?.notifications?.map(({
            notificationId, 
            sendedAt,
            body,
          }) => (
          <NotificationShadow key={notificationId}>
            <SwipeableView onPress={() => deleteNotifications(notificationId)}>
              <Notification>
                <NotificationHeader>
                  <NotificationText>Nome da Notificação</NotificationText>
                  <NotificationText>{sendedAt}</NotificationText>
                </NotificationHeader>
  
                <ShowMoreText
                  text={body}
                  numberOfLines={2.6}
                  textColor={'#474747'}
                />
              </Notification>
            </SwipeableView>
          </NotificationShadow>
        ))}

        { userData.notifications.length ?
          <DeleteAllContainer onPress={() => deleteNotifications()}>
            <DeleteAllIcon
              type="font-awesome-5"
              name="trash"
              solid
            />
          </DeleteAllContainer> : null }
      </>
    );
  } else {
    return (
      <EmptyDataText>Sem notificações</EmptyDataText>
    );
  }
}

return (
  <StickyHeader title="Notificações">
    <NotificationsContainer>
      {
        isLoading ? <Text>loading...</Text> :
        renderNotifications()
      }
    </NotificationsContainer>

    <AndroidBackHandler onBackPress={() => true} />
  </StickyHeader>
);

//* } **/

我试图创建一个属于userData对象的状态通知字段，但是它没有工作。我还将renderNotifications代码直接插入最后的模板返回，但是..。没有结果。

Answer 1

您正在修改userData的“形状”，这应该可以修复它：

const deleteNotifications = (notificationId) => {
    setIsLoading(true);

    let newNotifications = [];

    if (notificationId) {
        newNotifications = userData.notifications.filter((notification) => {
            return notification.notificationId !== notificationId;
        });
    }

    setUserData({...userData, notifications: newNotifications});
    setIsLoading(false);
};

Answer 2

首先，userData的声明与我有关。让我们尝试将初始状态设置为与未来状态相同的类型：

const [userData, setUserData] = useState([]);

我假设函数的开头有一些设置userData状态的内容。但是，由于您添加了notifications，所以delete函数不是用新的数据更新userData，而是只用通知更新。这将导致未来的通知不存在，从而创建和空数组。我也不认为user在这里很有用，因为它只是一个从userData读取数据的副本，无需额外的步骤也可以从userData读取数据。

让我们尝试应用这些更改：

if(notificationId && userData) {
  newUserData = userData.filter((user) => {
    return userData.notification.notificationId !== notificationId;
  });
}

如果这一点(在你的头上做了一些小调整)不起作用，你肯定需要提供更多的细节，特别是关于你的州的细节。