使用Redux和React Hooks，Flatlist既不会重新渲染，也不会重新渲染其中的各个组件

Question

我正在使用React Native，React Hooks，Redux和Function组件。 我正在使用useSelector从Redux的状态中获取大型数组，并使用Flatlist对其进行迭代。 在我的平面清单中，我渲染了多个子组件，包括我孩子的子组件。 我在该帖子的底部粘贴了主要孩子。 当我在单独的屏幕上并且FlatList处于非活动状态并且属性在数组trackingBoardList中的对象内部更改时，我希望Flatlist在返回屏幕时会重新呈现，但事实并非如此。 此外，即使我尝试使用React.memo() AvatarListItem子组件AvatarListItem ，子组件本身也不会重新渲染。 我无法获得重新渲染的完整列表，也无法独自让孩子们重新渲染。 Flatlist是否与React Hooks和带有嵌套对象的数组不兼容？ 在我的reducer中，当数组改变时，我确实不可变地返回了该数组，而我正在使用Immer draft这样做。

我通过useSelector获得状态。 这是一个包含许多深层嵌套对象的大型数组：

  const trackingBoardList = useSelector((state: iAppState) => {
    return state.trackingBoardAndSchedule.trackingBoardList;
  });

我的平面清单如下所示：

    <FlatList
            data={trackingBoardList}
            extraData={trackingBoardList}
            keyExtractor={() => uuid()}
            renderItem={({ item, index }) => {
              return (
                  <AvatarListItem
                    patientID={item.patient.id}
                    patientFirstName={item.patient.name_first}
                    patientLastName={item.patient.name_last}
                    patientMiddleName={item.patient.name_middle}
                    patientSex={item.patient.gender}
                    patientAge={calculateAge(item.patient.birth_dttm)}
                    visitReason={item.reason_for_visit}
                    time={item.created_dttm}
                    inProgress={false}
                    patientAvatarURI={item.patient.profile_image_name}
                    status={item.evisit_status}
                  />
              );
            }}
          />

我的子组件如下所示：

const AvatarListItem = (props: iAvatarListItem) => {
  return (
    <>
      <ListItemContainer {...props}>
        <Avatar
          avatarSize={42}
          avatarType='patient'
          avatarUserID={props.patientID}
          avatarURI={props.patientAvatarURI}
        />
        <NameAgeColumn>
          <ColumnTitle>
            {props.patientFirstName}
            {props.patientMiddleName ? ` ${props.patientMiddleName}` : ''}
            {` ${props.patientLastName}`}
          </ColumnTitle>
          <ColumnSmallText>
            {props.patientSex === 'M' ? 'Male, ' : ''}
            {props.patientSex === 'F' ? 'Female, ' : ''}
            {props.patientAge} Years
          </ColumnSmallText>
        </NameAgeColumn>
        <ReasonColumn>
          <ColumnTitle>Reason</ColumnTitle>
          <ColumnSmallText>{props.visitReason}</ColumnSmallText>
        </ReasonColumn>
        <LongBadge>
          <LongBadgeText>{props.status}</LongBadgeText>
        </LongBadge>
      </ListItemContainer>
    </>
  );
};

export default AvatarListItem;

Answer 1

为了回答我自己的问题，我在发布此消息后立即发现了该错误。 这是一个可变性问题。 我确信使用ImmerJS是不会改变我的状态的，但是不是使用draft状态，而是使用Immer自动地使用了baseState，该状态在整个应用程序中几乎都适用，但最终在此特定屏幕上引起了问题。 如果您遇到一个非常奇怪的重新渲染问题，无论您做什么，组件都拒绝重新渲染，我强烈建议您专注于您的reducer并尝试几种不同的返回状态的方法。