使用 'let' 关键字将数据传递到组件中

Question

我试图在运行进行 graphql 查询后将一些数据传递到我的 FlatList 组件中。如果我使用 const DATA 对数据进行硬编码，它就可以工作。但是，如果我定义两种情况（成功查询和不成功查询）并使用 let DATA，则变量不会正确传递到 FlatList 中，并且它们在 FlatList 组件中始终未定义。

我该如何解决这个问题？ 如何确保 DATA 仅在查询运行后才传递到 FlatList？

例如，像这样的硬编码数据有效：

const DATA = [
  {
    id: '1',
    imageUrl: defaultUrl,
    name: 'Friend',
    vehicles: [],
    rating: 1,
    numberOfFriends: 3,
  }
];

但这不是（虽然查询工作正常）：

let DATA;
 const { data, error } = useGetMyProfileQuery({
    onCompleted: () => {
      console.log('frineds', data.me.friends)
      DATA = data.me.friends.map(
        (item: {
            firstName: string;
            id: number;
            rating: number;
            vehicles: Array<Vehicle>;
            friends: Array<User>;
          
        }) => ({
          id: item.id,
          imageUrl: defaultUrl,
          name: item.firstName,
          rating: item.rating,
          //vehicles: item.vehicles,
          vehicles: [],
          numberOfFriends: item.friends.length,
        }),
      );
    },
    onError: ()=> {
          DATA = [
            {
              id: '1',
              imageUrl: defaultUrl,
              name: 'Friend',
              vehicles: [],
              rating: 1,
              numberOfFriends: 3,
            }
        }
  });

平面列表：

        <FlatList
          showsHorizontalScrollIndicator={false}
          data={DATA}
          horizontal={true}
          //scrollEnabled
          renderItem={({ item }) => (
            <WhitelistItem
              title={item.name}
              face={item.imageUrl}
              firstName={item.name}
              rating={item.rating}
              numberOfFriends={item.numberOfFriends}
              vehicles={item.vehicles}
            />
          )}
          keyExtractor={(item) => item.id}
        />

编辑：

我知道 setStates，但这是否保证每次查询重新运行时，数据都会更新？或者我是否必须使用 useEffect 等？以前用useStates的时候，数据经常不会自动更新，一直给旧数据所以一直在寻找替代方法

Answer 1

在这里，当你将 DATA 传递给 flatlist 时，它并没有得到当时的值。这就是为什么在传递数据时出现错误的原因。

您应该以某种方式等待，直到 DATA 获得所需的值。也可以根据条件绑定flatlist的渲染

Answer 2

you should use hooks or class based state in that case, as thats the only way to update your component to render new incoming data, there is also the option of force updating the component but that one is not reliable

使用 useState 挂钩，您可以设置 DATA 变量并重新渲染组件以填充数组

import React, {useState} from 'react'

const YourComponent = () => {

    const [DATA, setDATA] = useState([]);


    const { data, error } = useGetMyProfileQuery({
        onCompleted: () => {
          console.log('frineds', data.me.friends)
          let tmpData = data.me.friends.map((
              item: {
                firstName: string;
                id: number;
                rating: number;
                vehicles: Array<Vehicle>;
                friends: Array<User>;
              
            }) => ({
              id: item.id,
              imageUrl: defaultUrl,
              name: item.firstName,
              rating: item.rating,
              //vehicles: item.vehicles,
              vehicles: [],
              numberOfFriends: item.friends.length,
            }),
          );

          setDATA(tmpData)
        },
        onError: ()=> {
            tmpData = [{
                  id: '1',
                  imageUrl: defaultUrl,
                  name: 'Friend',
                  vehicles: [],
                  rating: 1,
                  numberOfFriends: 3,
            }]

            setDATA(tmpData)
        }
      });
}

使用 'let' 关键字将数据传递到组件中

pass data into component with 'let' keyword

javascript

typescript

reactjs

react-native

react-native-flatlist