Question

我正在开发一个本机应用程序。

在我的主要组件中，我使用UseEffect钩子将数据库响应存储在“ food”变量中。然后，我将使用此变量中包含的数据创建一个列表。

有我的钩子

const [ food, setFood ] = useState([]);
const [listData, setListData] = useState([]);

const load_food = async () => {
    db.listProduct().then(row => setFood(row))

    setListData(
        Array(food.length)
            .fill('')
            .map((_, i) => ({ key: `${i}`, product: `${food[i].PRODUCTNAME}`,
                                    date: `${food[i].DATE}`,
                                    uri: `${food[i].IMAGEURL}`,
                                    id: `${food[i].IDPRODUCT}`})))
};
useEffect( () => { load_food(food) }, [food] );

但是问题是这个钩子被无限期调用。如果我将console.log（'test'）放在钩子中，则日志将是无限的。因此，我的应用非常慢

从我对类似问题的理解中，我必须像这样在钩子中保留一个空数组：

useEffect( () => { load_food(food) }, [] );

但是，这样做不会初始化我的列表。

我找不到解决方法

Answer 1

useEffect（（）=> {load_food（food）}，[food]）;这是错误的，在这里您需要使用props值来更新状态，而不是使用另一个状态值来更新组件，而不是[food]，使其成为[]并在useEffect下使用。我想这应该可以，否则请在执行setListData调用时检查逻辑是否返回正确的值。

useEffect (() => {
db.listProduct().then(row => setFood(row))

    setListData(
        Array(food.length)
            .fill('')
            .map((_, i) => ({ key: `${i}`, product: `${food[i].PRODUCTNAME}`,
                                    date: `${food[i].DATE}`,
                                    uri: `${food[i].IMAGEURL}`,
                                    id: `${food[i].IDPRODUCT}`})))

},[])

Answer 2

您可以尝试这种方式

const [ food, setFood ] = useState([]);

const [listData, setListData] = useState([]);

const load_food = async () => {
  const row = await db.listProduct();
  setFood(row);

  setListData(row.map(
     (item,i) => ({ 
       key: i, 
       product: item.PRODUCTNAME,
       date: item.DATE,
       uri:item.IMAGEURL,
       id:item.IPRODUCT
      })));

useEffect( () => { load_food() }, [] );

反应本地钩子中的无限循环

2 个答案: