React本机如何在Flatlist中用相同的id显示不同的API

Question

我有两个不同的API，我想在一个Flatlist中显示两个API，这是工作的(看图片)。我使用id显示它(如果API有相同的id将显示)。我的问题是如何删除/隐藏/不显示空值平面列表(查看图片)？我正在使用来自https://jsonplaceholder.typicode.com的API

想象一下我的应用程序

  const {user, post} = useSelector(state => state.reducer);
  const dispatch = useDispatch();

  const getData = [...user, ...post];

  useEffect(() => {
    dispatch(getProfile());
    dispatch(getPost());
  }, []);


  const tailwind = useTailwind();

const renderPost = ({item}) => {
    const renUsr = user.filter(renUsr => renUsr.id === item.userId);
    return (
      renUsr.id !== item.userId ? (
        <View style={tailwind('pb-4')}>
          <View style={tailwind('px-4 py-4 bg-gray-200 mx-6 rounded-[20px]')}>
            <View style={tailwind('flex flex-row')}>
              <Image style={tailwind('rounded bg-black w-8 h-8')} />
              {renUsr.map(posting => (
                <Text
                  key={posting.id}
                  style={tailwind('pl-2 font-semibold py-2')}>
                  {posting.name}
                </Text>
              ))}
            </View>
            <View style={tailwind('mt-2')}>
              <TouchableHighlight
                style={styles.touchHighlight}
                onPress={navigation}>
                <View style={tailwind('bg-gray-200 p-1')}>
                  <Text key={item.id}>{item.body}</Text>
                </View>
              </TouchableHighlight>
            </View>
          </View>
        </View>
      ) : (
        null
      ) 
    );
  };

  return (
      <FlatList
        data={getData}
        renderItem={renderPost}
        keyExtractor={item => item.id}
      />
  );
};

Answer 1

user.filter(renUsr => renUsr.id === item.userId);

不要在这里使用过滤器，只需过滤传递给平面列表的列表，这样它就只循环一次，而不是对每一项进行过滤。