Каков наилучший способ инициализировать состояние в ReactNative с пользовательскими значениями на модальной?

Question

Итак, у меня есть конкретная проблема c, где мне нужно инициализировать состояние с пользовательскими значениями, исходящими от родительского компонента props.theValue. Но проблема в том, что props.theValue не готов, когда мы устанавливаем состояние. Так что эта строка никогда не должна работать:

const [grams, setGrams] = useState(props.theValue)

Сценарий: У нас есть список продуктов на родительском экране, когда пользователи нажимают на него, он открывает модальное (как Всплывающее окно) с некоторыми вариантами выбора до манипулирования выбранным элементом

Что я пробовал?

1. Установите начальный флаг useState(-1), чтобы указать, что он должен установить значение от props но опять же, реквизиты не готовы в этом состоянии
2. Сохраните состояние на родительском элементе и передайте состояние с установленной функцией модальному. Но, тем не менее, это не совсем верно
3. useEffect, но всякий раз, когда я вызываю setGrams, появляется ошибка рендеринга L oop, также props.theValue все еще не определено

Пример :

В этом случае оба TextInput должны иметь начальное значение, которое поступает из родительского компонента и которым нужно манипулировать.

Answer 1

Вы можете использовать Redux для манипулирования данными между компонентами или попробовать что-то вроде:

установить глобальную переменную:

let previousObj = null

, а затем установить тайм-аут для обновления только ваших данных один раз, даже если вы установите Modal невидимым и Visible снова

setTimeout(() => {
    if(food.grams != undefined && previousObj != food){
        previousObj = food
        setGrams(""+food.grams)
    }
}, 100)

Answer 2

Вы можете обрабатывать его в дочернем элементе со значением по умолчанию или не отображать компонент в родительском до тех пор, пока значение не станет доступным:

{theValue && <Component theValue={theValue} />}

Вы можете использовать useEffect, чтобы обновить значение по умолчанию как скважина:

const [grams, setGrams] = useState(0)

useEffect(() => {
 if (theValue) {
  setGrams(theValue);
 }
}, [theValue])