Бесконечный l oop в react native hook - PullRequest
Новая
       6

Бесконечный l oop в react native hook

0 голосов
/ 20 июня 2020

Я работаю над собственным приложением для реагирования.

В моем основном компоненте я использую перехватчик 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) }, [] );

список не инициализируется.

Не могу найти решение

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

можно попробовать так 

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() }, [] );
0 голосов
/ 20 июня 2020

useEffect (() => {load_food (food)}, [food]); это неправильно, здесь вам нужно использовать значение props для обновления состояния, а не другое значение состояния для обновления компонента, вместо [food], сделайте его [] и используйте ниже useEffect. Я думаю, это должно сработать, иначе проверьте logi c, возвращает ли он правильные значения, когда вы выполняете вызов 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}`})))

},[])
...