使用 setState 在本机反应中处理嵌套状态数据

Question

我有餐厅菜单的应用程序，餐厅的所有者在将项目添加到菜单时有一个选项，他可以提供菜单项的自定义，以便客户可以在下订单之前从这些选项中进行选择，然后再将其添加到菜单中，自定义将包括菜单项的充值，因此我为餐厅老板提供了输入数字的选项，并基于该数字 TextInputs 将显示以添加充值，例如，如果所有者输入数字 2，将显示两个视图，在每个视图中都有两个 TextInput，一个用于名称，一个用于价格，所以问题是如何使用 setState 将输入的数据保存在每个 TextInput 中，而这个状态结构将是这样的：

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

从每个有两个 TextInput 表示 {'name',price} 的视图将存储在 required 中，状态为 topups

我做了以下事情： 这就是我根据输入的数字显示 TextInputs 的方式：

{numberOfTopupsItems > 0 &&
   <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>
  }

从每个 TextInput 那里，我将其值设置为状态一为名称，一为价格，我正在使用此代码修改主要状态 topups：

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

    }, [name, price])

如果用户输入数字 1 并设置名称和价格的值一切正常，但是当输入一个以上的数字时，我将有多个名称和价格的视图 TextInputs 然后它不起作用，因为它删除上一个值并将最后一个值添加到状态中，我发现我应该首先使用索引来存储值，但我不知道如何做到这一点。

Answer 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 &&
   <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>
  }