Блог

У меня есть приложение для меню ресторана, владелец ресторана, когда добавляет пункт в меню, есть опция, где он может настроить пункт меню, чтобы клиент мог выбрать один из них перед размещением заказа, перед добавлением его в меню, настройка будет включать в себя пополнение для пункта меню, поэтому я дал владельцу ресторана возможность ввести номер, и на основе этого номера будут отображаться текстовые данные для добавления пополнений, например, если владелец введет номер 2, будут отображаться два представления, в каждом представлении есть два ввода текста, один для имени и один для цены, таким образом, возникает вопрос, как сохранить введенные данные в каждом TextInput с помощью setState, в то время как эта структура состояния будет выглядеть так:

const [topups, setTopups] = useState({required: [] })

из каждого представления, в котором есть два {'name',price} текстовых ввода, они будут храниться внутри required в состоянии topups

Я сделал следующее: вот как я отображаю текстовые данные на основе введенного числа:

 {numberOfTopupsItems > 0 amp;amp;
   <View style={{ borderRadius: 5, borderColor: colors.black, borderWidth: 1, padding: 5 }}>
       {[...Array(Number(numberOfTopupsItems)).keys()]
             .map(el =>
               <View >
                  <Text> topup item no. {el   1}</Text>
                  <Input
                         label="Enter name of topup"
                         mode='outlined'
                         onChangeText={text => setName(text)}
                   />
                   <Input
                         label="Enter Price of topup"
                          mode='outlined'
                          keyboardType={'decimal-pad'}
                          autoCorrect={false}
                          onChangeText={text => setPrice(text)}
                    />


                </View>
          )}
     </View>
  }
 

из каждого текстового ввода я устанавливаю его значение в состоянии один для имени и один для цены, и я изменяю основное состояние topups , используя этот код:

   useEffect(() => {
     
        const newRTopup = Object.assign({}, topups, { required: [name, price] })
        setTopups(newRTopup)

    }, [name, price])
 

если пользователь ввел номер 1 и установил значения для имени и цены, все в порядке, однако, когда я ввожу число больше одного, у меня будет более одного представления для текстовых данных имени и цены, то это не работает, так как он удаляет предыдущее значение и добавляет последнее значение в состояние, я обнаружил, что сначала должен использовать индекс для хранения значения, но я понятия не имею, как это сделать.

Существует несколько способов обработки этого варианта использования.

Один из них заключается в инициализации элементов пополнения при numberOfTopupsItems изменениях:

 useEffect(()=>{
    let top = {required: []}
    if (numberOfTopupsItems) {
        for (let i = 0; i < numberOfTopupsItems; i  ){
            top.required.push({name: null, price: null})
        }
    } 
    setTopups(top)
    
},[numberOfTopupsItems])
 

Затем вы можете построить свое представление на основе инициализированного значения и использовать индекс для изменения состояния:

 {numberOfTopupsItems > 0 amp;amp;
   <View style={{ borderRadius: 5, borderColor: colors.black, borderWidth: 1, padding: 5 }}>
       {topups.required
             .map((el,i) => // i is the array index
               <View >
                  <Text> topup item no. {i   1}</Text>
                  <Input
                         label="Enter name of topup"
                         mode='outlined'
                         onChangeText={text => {
                            let newState = {...topups};
                            topups.required[i].name = text;
                            setTopups(newState)
                         }}
                   />
                   <Input
                         label="Enter Price of topup"
                          mode='outlined'
                          keyboardType={'decimal-pad'}
                          autoCorrect={false}
                          onChangeText={text => {
                            let newState = {...topups};
                            topups.required[i].price = text;
                            setTopups(newState)
                         }}
                    />


                </View>
          )}
     </View>
  }