Вызов хуков при изменении компонента в React Native - PullRequest
Новая
       98

Вызов хуков при изменении компонента в React Native

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

Я работаю над собственным приложением для реакции. Это приложение использует базу данных, основной компонент использует 2 разных хука.

Первый хук извлекает результаты запроса SQL и сохраняет их в переменной.

Второй хук создает список из первой переменной

Вот так: 

const [people, setPeople ] = useState([]);
useEffect (() => { 
    db.getAllPeople().then(row => setPeople(row))  
},[])

const [listData, setListData] = useState([]);
useEffect(()=> {
    setListData(
        
        Array(people.length)
            .fill('')
            .map((_, i) => ({ key: `${i}`, name: `${people[i].name}`}))
    )
}, [people]);

После этого мой основной компонент отображает SwipeList из результатов.

Вот проблема. Я использую другой компонент для добавления элемента в свою базу данных. Когда я вернусь к своему основному компоненту, я бы хотел, чтобы этот новый элемент отображался. Но проблема в том, что 2 перехватчика не вызываются при изменении компонента, и поэтому список остается неизменным.

Я пытался использовать useFocusEffect, но в моем случае он не работает.

Есть предложения?

Ответы [ 2 ]

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

Есть одна проблема с вашим текущим кодом или потенциальные проблемы

Ваш второй useEffect может быть вызван, когда people станет пустым списком, это приведет к сбросу данных вашего списка. Лекарство - поместить внутрь оператор if, например 

useEffect(()=> {
    if (!people) return;
    setListData(...)
}, [people]);

Честно говоря, если эти два списка связаны, вам не следует использовать два hook. Лучший способ - определить listData

  const listData = (a function that takes people as input), ex. 
  const listData = people.map(v => v)

. Конечно, может быть причина, по которой вы хотели бы ввести больше ловушек в сложной ситуации, например. useRef, useMemo.

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

Я думаю, что хук useState управляет состоянием самого компонента, если вы не передаете это состояние своим родителям и потомкам или не используете обратные вызовы для установки состояния компонента, который вы хотите визуализировать, вы можете использовать единственный источник правда, чтобы обрабатывать изменения в данных, реагируйте сами, заметите эти изменения и, следовательно, отобразите измененные экраны, учитывая, что у вас есть асинхронные операции при запросе к базе данных, вам может помочь комбинация саги о сокращении и саге о сокращении. https://github.com/redux-saga/redux-saga

...