使用“let”关键字将数据传递给组件

Posted 2023-03-13

【中文标题】使用“let”关键字将数据传递给组件

【英文标题】：pass data into component with 'let' keyword

【发布时间】：2020-10-17 03:07:54

【问题描述】：

在运行 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的时候，数据经常不会自动更新，老是给老数据，所以找了个替代方法

【问题讨论】：

在这种情况下，您应该使用钩子，因为这是更新组件以呈现新传入数据的唯一方法，还有强制更新组件的选项，但该选项不可靠

这能回答你的问题吗？ Why is React not rendering my component state correctly?

【参考方案1】：

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)
        
      );

【讨论】：

这样能保证每次重新运行查询，数据都会更新吗？以前我用useStates的时候，数据经常没有自动更新，老是给老数据

好吧，如果查询重新运行，那将通过这个 HOC useGetMyProfileQuery，因为在这种情况下，你已经包含了一个更新数据的函数'setDATA'函数，这几乎可以保证状态将是重置为新数据，这意味着组件将重新渲染

但是在设置新数据之前，旧的data是否有可能再次传递给flatList？

另外，对于``` setDATA(tmpData)on the onErrorcase, I get an error that argument 这种类型的参数不能分配给'SetStateAction'类型的参数。If I change useState ([]);``` 到useState<any>()然后它可以正常工作，但使用any。不是个好主意

不可能传递旧数据，因为您将它们存储在状态中，除非您使用旧数据设置状态，但这不会在您设置的代码上发生回调结果的新状态。您正在使用打字稿，这就是您收到类型转换错误的原因，我在没有静态类型的 javascript 上编写了它。你很擅长使用

【参考方案2】：

在这里，当您将 DATA 传递给 flatlist 时，它当时没有获取值。这就是您在传递 DATA 时收到错误的原因。

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