Блог

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

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

Этот список приглашений создается внутри компонента с помощью созданной мной функции;

 function invites(teamInvites) {
    if (!teamInvites) {
      return null;
    }

    return (
        <ul className={styles.pendingInvites}>
          {teamInvites.map((invite, index) => (
              <li key={invite.id} id={invite.id}>
                <span class={styles.email}>{invite.email}
                <span className={styles.pending}>Pending</span></span>
                <span class={styles.right}>
                  <a onClick={() => {actionResendTeamUserInvite(teamId, teamName, invite.email)}}>Resend Invite</a>amp;nbsp;|amp;nbsp;
                  <a onClick={() => {removeInvite(invite.email)}}>Cancel</a>
                </span>
              </li>
          ))}
        </ul>
    );
  }
  

Это вызывается в компоненте следующим образом;

{приглашения (teamInvites)}

Затем у меня есть функция, которая удаляет приглашение из teamInvites массива;

 const removeInvite = (email) => {
    actionRemoveTeamUserInvite(teamId, email);
    let index = 0;
    let removeAtIndex = -1;
    teamInvites.forEach(invite => {
      if (invite.email === email) {
        removeAtIndex = index;
      }
      index  ;
    });
    if (removeAtIndex >= 0) {
      removeAtIndex = -1;
    }

    return false;
  }
  

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

Почему само представление не обновляется вместе с массивом?

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

 const Invites = ({ teamInvites }) => {
  if (!teamInvites) {
    return null;
  }
  const [teamInvitesState, setTeamInvitesState] = useState(teamInvites);
  const removeInvite = (i) => {
    setTeamInvitesState([
      ...teamInvitesState.slice(0, i),
      ...teamInvitesState.slice(i   1)
    ]);
  };
  return (
      <ul className={styles.pendingInvites}>
        {teamInvites.map((invite, index) => (
            <li key={invite.id} id={invite.id}>
              <span class={styles.email}>{invite.email}
              <span className={styles.pending}>Pending</span></span>
              <span class={styles.right}>
                <a onClick={() => {actionResendTeamUserInvite(teamId, teamName, invite.email)}}>Resend Invite</a>amp;nbsp;|amp;nbsp;
                <a onClick={() => {removeInvite(index)}}>Cancel</a>
              </span>
            </li>
        ))}
      </ul>
  );
};
  

И назовите это как:

 <Invites {...{teamInvites}} />
  

Вам нужно снова передать массив значений invites, чтобы повторно отобразить компонент.

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

Или, как только вы получите массив значений invites в качестве свойства, установите его во внутреннее состояние и обновите состояние в функции removeInvite.

Вам необходимо установить состояние для измененного массива. Только тогда будет выполнен повторный рендеринг и сопоставление обновленного массива array