0

我正在尝试在 FlatList 中选择单个项目。所需的功能是单击取消关注，并且已单击的特定项目从“取消关注”更改为“关注”。到目前为止，我已经设法完成了这个功能，但问题是当我手动重新渲染组件时进行了更改。

这是代码：

function FolloweringScreens({
    All my props here
}) {
  const [refresh, setRefresh] = useState(false);

  const onClickItem = (item, index) => {
    return item.isFollowed
      ? (item.isFollowed = false)
      : (item.isFollowed = true);
  };

  return (
    <>
      <FlatList
        scrollEnabled={true}
        onEndReachedThreshold={0}
        refreshing={refresh}
        onRefresh={handleFetch}
        onEndReached={noMoreData || loadingMore ? null : handleMoreData}
        data={data}
        style={{marginTop: height * 0.07}}
        keyExtractor={(i, index) => index.toString()}
        renderItem={({item, index}) => {
          return (
            <>
              <TouchableHighlight
                style={styles}
                underlayColor="transparent"
                onPress={() => navigation.navigate('Profile page', {item})}>
                <View
                  style={styles}>

                  {User avatar and users Name components here}

                  {screen === 'Followers' ? (
                    <View>
                      <TouchableHighlight
                        underlayColor="transparent"
                        style={{marginLeft: 0}}
                        onPress={() => {
                          item.isFollowing
                            ? onClickItem(item, index)
                            : onClickItem(item, index);
                        }}>
                        {item.isFollowing ? (
                          <Text>Unfollow</Text>
                        ) : (
                          <Text>Follow</Text>
                        )}
                      </TouchableHighlight>
                    </View>
                  ) : (
                    <View>
                      <TouchableHighlight
                        underlayColor="transparent"
                        style={{marginLeft: 0}}
                        onPress={() => {
                          item.isFollowed
                            ? onClickItem(item, index)
                            : onClickItem(item, index); <<<<-- This is where I am selecting the item
                        }}>
                        {item.isFollowed ? (
                          <Text>Unfollow</Text>
                        ) : (
                          <Text>Follow</Text>
                        )}
                      </TouchableHighlight>
                    </View>
                  )}
                </View>
              </TouchableHighlight>
            </>
          );
        }}
      />
    </>
  );
}

export default FolloweringScreens;
4

2 回答 2

0

当单击取消关注或关注按钮时，我设法通过更改初始数据来修复它。这是代码：

function FolloweringScreens({
  bunch of props here,
  data,
  setfollowingData,
}) {
  const [refresh, setRefresh] = useState(false);
  const [stateData, setStateData] = useState();

  useEffect(() => {
    setStateData(data);
  }, [data]);

    const onClickItem = (item, index) => {
    const newArrData = data.map((e, index) => {
      if (item.profileName === stateData[index].profileName) {
        item.isFollowed
          ? unfollowUser(username, item.profileName)
          : followUser(username, item.profileName);
        return {...e, isFollowed: !stateData[index].isFollowed};
      }
      return {
        ...e,
        isFollowed: true,
      };
    });
    setfollowingData(newArrData);
  };

  return (
    <>
      <FlatList
        scrollEnabled={true}
        onEndReachedThreshold={0}
        refreshing={refresh}
        onRefresh={handleFetch}
        onEndReached={noMoreData || loadingMore ? null : handleMoreData}
        data={stateData}
        style={{marginTop: height * 0.07}}
        keyExtractor={(i, index) => index.toString()}
        renderItem={({item, index}) => {
          return (
            <>
              <TouchableHighlight
                style={styles}
                underlayColor="transparent"
                onPress={() => navigation.navigate('Profile page', {item})}>
                <View
                  style={styles}>

                  {User Avatar and User Username components here}

                  {screen === 'Followers' ? (
                    <View>
                      <TouchableHighlight
                        underlayColor="transparent"
                        style={{marginLeft: 0}}
                        onPress={() => {
                          // item.isFollowing
                          //   ? unfollowUser(username, item.profileName)
                          //   : followUser(username, item.profileName);
                          item.isFollowing
                            ? onClickItem(item, index)
                            : onClickItem(item, index);
                        }}>
                        {item.isFollowing ? (
                          <Text>Unfollow</Text>
                        ) : (
                          <Text>Follow</Text>
                        )}
                      </TouchableHighlight>
                    </View>
                  ) : (
                    <View>
                      <TouchableHighlight
                        underlayColor="transparent"
                        style={{marginLeft: 0}}
                        onPress={() => {
                          // item.isFollowed
                          // ? (item.isFollowed = false)
                          // : // unfollowUser(username, item.profileName)
                          //   followUser(username, item.profileName);
                          item.isFollowed
                            ? onClickItem(item, index)
                            : onClickItem(item, index); <-This is where item is selected
                        }}>
                        {item.isFollowed ? (
                          <Text>Unfollow</Text>
                        ) : (
                          <Text>Follow</Text>
                        )}
                      </TouchableHighlight>
                    </View>
                  )}
                </View>
              </TouchableHighlight>
            </>
          );
        }}
      />
    </>
  );
}

export default FolloweringScreens;
于 2021-01-29T13:11:20.460 回答
0

我看不出“数据”来自哪里，但我想它来自道具。尝试修改 props 是一种不好的做法，永远不应该这样做，所以我建议处理 state 中的数据，如下所示：

function FolloweringScreens({
    All my props here
}) {
  const [stateData, setStateData] = useState(data);
  const [refresh, setRefresh] = useState(false);

  const onClickItem = (index) => {
    const stateDataCopy = [...stateData];
    stateDataCopy[index].isFollowed = !stateDataCopy[index].isFollowed;
    setStateData(stateDataCopy);
  };

  return (
    <>
      <FlatList
        scrollEnabled={true}
        onEndReachedThreshold={0}
        refreshing={refresh}
        onRefresh={handleFetch}
        onEndReached={noMoreData || loadingMore ? null : handleMoreData}
        data={stateData}
        style={{marginTop: height * 0.07}}
        keyExtractor={(i, index) => index.toString()}
        renderItem={({item, index}) => {
          return (
            <>
              <TouchableHighlight
                style={styles}
                underlayColor="transparent"
                onPress={() => navigation.navigate('Profile page', {item})}>
                <View
                  style={styles}>

                  {User avatar and users Name components here}

                  {screen === 'Followers' ? (
                    <View>
                      <TouchableHighlight
                        underlayColor="transparent"
                        style={{marginLeft: 0}}
                        onPress={() => {
                          onClickItem(index);
                        }}>
                        {item.isFollowing ? (
                          <Text>Unfollow</Text>
                        ) : (
                          <Text>Follow</Text>
                        )}
                      </TouchableHighlight>
                    </View>
                  ) : (
                    <View>
                      <TouchableHighlight
                        underlayColor="transparent"
                        style={{marginLeft: 0}}
                        onPress={() => {
                          onClickItem(index);
                        }}>
                        {item.isFollowed ? (
                          <Text>Unfollow</Text>
                        ) : (
                          <Text>Follow</Text>
                        )}
                      </TouchableHighlight>
                    </View>
                  )}
                </View>
              </TouchableHighlight>
            </>
          );
        }}
      />
    </>
  );
}

export default FolloweringScreens;

可能这个确切的代码不起作用，但这里的想法是您将数据存储在本地状态中，并在单击项目时修改该状态数据的“isFollowed”值。

于 2021-01-29T13:14:01.363 回答