有沒有辦法在運行時為反應鈎子創建變量

Question

有沒有辦法在運行時為反應掛鈎創建變量，以便可以在運行時提取變量的值並將其傳遞給 API，而不是像我目前正在做的那樣在設計時創建特定的變量名

請參閱下面的代碼

import React, { FC, useState } from "react"
import { View, SafeAreaView, TextInput, ImageBackground, ScrollView, Alert } from "react-native"
import { StackScreenProps } from "@react-navigation/stack"
import { observer } from "mobx-react-lite"
import { Button, Text } from "../../components"
import { NavigatorParamList } from "../../navigators"
import { Images } from "../../config"
import { store } from "../../store"
import { RadioButton } from "react-native-paper"
import axios from "axios"
import { SEND_FEEDBACK_URL, showErrorAlert } from "../../utils/constants"
import {
  BOTTOM_HALF,
  CONTINUE,
  CONTINUE_TEXT,
  FOOTER_CONTENT,
  FULL,
  LABEL,
  RED_ACTION_LINK,
  RED_ACTION_STYLES,
  REGULAR_TEXT,
  SMALLL_TEXT,
  SMALLL_TEXT_C,
  SUBJECT,
  textArea,
  textAreaContainer,
} from "./send-feedback-styles"

export const SendFeedbackScreen: FC<StackScreenProps<NavigatorParamList, "Send">> = observer(
  ({ navigation }) => {
    const tempQuestIdArray = []
    let tempStr: string,
      temp0: string,
      temp1: string,
      temp2: string,
      temp3: string,
      temp4: string,
      temp5: string,
      temp6: string,
      temp7: string
    const [freeText, setFreeText] = useState("")

    console.log("<<<<<<BEFORE fetching stored token")
    const token = store.getState().token.tokenValue
    console.log("<<<<<<<PROFILE TOKEN>>>>>>>>>")
    console.log(JSON.stringify(token))
    console.log("<<<<<<<PROFILE TOKEN>>>>>>>>>")
    console.log("<<<<<<BEFORE fetching stored Sales Agent Id")
    const salesAgentId = store.getState().salesAgentId.salesAgentIdValue
    console.log("<<<<<<< SALES Agent id >>>>>>>>>")
    console.log(JSON.stringify(salesAgentId))
    console.log("<<<<<<< SALES Agent id >>>>>>>>>")

    const getSuccessScreen = () => navigation.navigate("Successful")

    const config = {
      headers: { Authorization: `bearer ${token}` },
    }

    const api = axios.create({
      baseURL: SEND_FEEDBACK_URL,
    })

    const [checked0, setChecked0] = useState("")
    const [checked1, setChecked1] = useState("")
    const [checked2, setChecked2] = useState("")
    const [checked3, setChecked3] = useState("")
    const [checked4, setChecked4] = useState("")
    const [checked5, setChecked5] = useState("")
    const [checked6, setChecked6] = useState("")
    const [checked7, setChecked7] = useState("")
    const [questIdStore, setQuestIdStore] = useState([])

    // const { setToken } = useTokenStore()
    const barcodeId = store.getState().barcodeId.barcodeIdValue
    const CustomerId = store.getState().customerId.customerIdValue
    const DeviceId = store.getState().deviceId.deviceIdValue
    const questionsArray = store.getState().questionArray.questionArrayValue
    const CustomerName = store.getState().customerName.customerNameValue

    const QUESTIONS = questionsArray
    console.log("questions  >> ", QUESTIONS)
    // console.log("QUESTIONS[0].id  >> ", QUESTIONS[0].id)

    const renderInputRadios = () => {
      const qArray = QUESTIONS
      return (
        <View>
          {qArray.map((i, key) => {
            console.info("key >>> ", key)
            console.info("i.id >>> ", i.id)
            tempQuestIdArray.push(i.id)
            // setQuestIdStore(tempQuestIdArray) --causing re renders
            // eslint-disable-next-line no-eval
            tempStr = eval("checked" + key)
            console.info("tempQuestIdArray >>> ", tempQuestIdArray)

            switch (key) {
              case 0:
                temp0 = tempStr
                console.info("temp0 >>> ", temp0)
                break
              case 1:
                temp1 = tempStr
                console.info("temp1 >>> ", temp1)
                break
              case 2:
                temp2 = tempStr
                console.info("temp2 >>> ", temp2)
                break
              case 3:
                temp3 = tempStr
                console.info("temp3 >>> ", temp3)
                break
              case 4:
                temp4 = tempStr
                console.info("temp4 >>> ", temp4)
                break
              case 5:
                temp5 = tempStr
                console.info("temp5 >>> ", temp5)
                break
              case 6:
                temp6 = tempStr
                console.info("temp6 >>> ", JSON.stringify(temp6))
                break
              case 7:
                temp7 = tempStr
                console.info("temp7 >>> ", JSON.stringify(temp7))
                break
              default:
                console.info("INSIDE DEFAULT")
            }
            return (
              <View key={key}>
                <View style={RED_ACTION_STYLES}>
                  <View>
                    <Text style={SMALLL_TEXT}>{i.questionWord}</Text>
                  </View>
                  <View style={RED_ACTION_LINK}>
                    <Text style={SMALLL_TEXT_C}>1</Text>
                    <RadioButton
                      value="0"
                      status={tempStr === "0" ? "checked" : "unchecked"}
                      onPress={() =>{
                        switch (key) {
                          case 0:
                            setChecked0("0")
                            break
                          case 1:
                            setChecked1("0")
                            break
                          case 2:
                            setChecked2("0")
                            break
                          case 3:
                            setChecked3("0")
                            break
                          case 4:
                            setChecked4("0")
                            break
                          case 5:
                            setChecked5("0")
                            break
                          case 6:
                            setChecked6("0")
                             break
                          case 7:
                            setChecked7("0")
                             break
                          default:
                            console.info("INSIDE DEFAULT")
                        }
                      }
                      
                      }
                    />
                    <Text style={SMALLL_TEXT_C}>2</Text>
                    <RadioButton
                      value="1"
                      status={tempStr === "1" ? "checked" : "unchecked"}
                      onPress={() =>{
                        switch (key) {
                          case 0:
                            setChecked0("1")
                            break
                          case 1:
                            setChecked1("1")
                            break
                          case 2:
                            setChecked2("1")
                            break
                          case 3:
                            setChecked3("1")
                            break
                          case 4:
                            setChecked4("1")
                            break
                          case 5:
                            setChecked5("1")
                            break
                          case 6:
                            setChecked6("1")
                             break
                          case 7:
                            setChecked7("1")
                             break
                          default:
                            console.info("INSIDE DEFAULT")
                        }
                      }
                      
                      }
                    />

                    <Text style={SMALLL_TEXT_C}>3</Text>
                    <RadioButton
                      value="2"
                      status={tempStr === "2" ? "checked" : "unchecked"}
                      onPress={() =>{
                        switch (key) {
                          case 0:
                            setChecked0("2")
                            break
                          case 1:
                            setChecked1("2")
                            break
                          case 2:
                            setChecked2("2")
                            break
                          case 3:
                            setChecked3("2")
                            break
                          case 4:
                            setChecked4("2")
                            break
                          case 5:
                            setChecked5("2")
                            break
                          case 6:
                            setChecked6("2")
                             break
                          case 7:
                            setChecked7("2")
                             break
                          default:
                            console.info("INSIDE DEFAULT")
                        }
                      }
                      
                      }
                    />
                    <Text style={SMALLL_TEXT_C}>4</Text>
                    <RadioButton
                      value="3"
                      status={tempStr === "3" ? "checked" : "unchecked"}
                      onPress={() =>{
                        switch (key) {
                          case 0:
                            setChecked0("3")
                            break
                          case 1:
                            setChecked1("3")
                            break
                          case 2:
                            setChecked2("3")
                            break
                          case 3:
                            setChecked3("3")
                            break
                          case 4:
                            setChecked4("3")
                            break
                          case 5:
                            setChecked5("3")
                            break
                          case 6:
                            setChecked6("3")
                             break
                          case 7:
                            setChecked7("3")
                             break
                          default:
                            console.info("INSIDE DEFAULT")
                        }
                      }
                      
                      }
                    />
                    <Text style={SMALLL_TEXT_C}>5</Text>
                    <RadioButton
                      value="4"
                      status={tempStr === "4" ? "checked" : "unchecked"}
                      onPress={() =>{
                        switch (key) {
                          case 0:
                            setChecked0("4")
                            break
                          case 1:
                            setChecked1("4")
                            break
                          case 2:
                            setChecked2("4")
                            break
                          case 3:
                            setChecked3("4")
                            break
                          case 4:
                            setChecked4("4")
                            break
                          case 5:
                            setChecked5("4")
                            break
                          case 6:
                            setChecked6("4")
                             break
                          case 7:
                            setChecked7("4")
                             break
                          default:
                            console.info("INSIDE DEFAULT")
                        }
                      }
                      
                      }
                    />
                  </View>
                </View>
              </View>
            )
          })}
          <View style={textAreaContainer}>
            <TextInput
              style={textArea}
              underlineColorAndroid="transparent"
              placeholder="Type something"
              placeholderTextColor="grey"
              numberOfLines={5}
              multiline={true}
              value={freeText}
              onChangeText={(freeText) => setFreeText(freeText)}
            />
          </View>
        </View>
      )
    }

    const onSendFeedbacck = async () => {
      if (!checked1) {
        showErrorAlert("Your Response")
        return
      }
      if (!checked2) {
        showErrorAlert("Your Response")
        return
      }
      if (!checked3) {
        showErrorAlert("Your Response")
        return
      }

      console.log("<<< inside onSendFeedbacck >>>>>")

      const quest1: string = QUESTIONS[0].id
      const quest2: string = QUESTIONS[1].id
      const quest3: string = QUESTIONS[2].id  
      const quest4: string = QUESTIONS[3].id
      const quest5: string = QUESTIONS[4].id
      const quest6: string = QUESTIONS[5].id
      const quest7: string = QUESTIONS[6].id

      // const salesAgentId = LOCAL_SALES_AGENT_ID

      console.log("quest1 ..>>>>>>>> ", quest1)
      console.log("quest2 ..>>>>>>>> ", quest2)
      console.log("quest3 ..>>>>>>>> ", quest3)
      console.log("quest4 ..>>>>>>>> ", quest4)
      console.log("quest5 ..>>>>>>>> ", quest5)
      console.log("quest6 ..>>>>>>>> ", quest6)
      console.log("quest7 ..>>>>>>>> ", quest7)

      const answer1 = {
        questionId: quest1,
        answer: Number(checked0),
      }

      const answer2 = {
        questionId: quest2,
        answer: Number(checked1),
      }
      const answer3 = {
        questionId: quest3,
        answer: Number(checked2),
      }
      const answer4 = {
        questionId: quest4,
        answer: Number(checked3),
      }
      const answer5 = {
        questionId: quest5,
        answer: Number(checked4),
      }
      const answer6 = {
        questionId: quest6,
        answer: Number(checked5),
      }
      const answer7 = {
        questionId: quest7,
        answer: Number(checked6),
      }

      const AnswerArray = []

      AnswerArray.push(answer1)
      AnswerArray.push(answer2)
      AnswerArray.push(answer3)
      AnswerArray.push(answer4)
      AnswerArray.push(answer5)
      AnswerArray.push(answer6)
      AnswerArray.push(answer7)

      console.log("AnswerArray ..>>>>>>>> ", AnswerArray)

      const AnswerArrayStr = JSON.stringify(AnswerArray)
      console.log("AnswerArrayStr ..>>>>>>>> ", AnswerArrayStr)

      const AnswerArrayObj = JSON.parse(AnswerArrayStr)
      console.log("AnswerArrayObj ..>>>>>>>> ", AnswerArrayObj)

      const dataToSend = {
        customerId: CustomerId,
        productDeviceId: DeviceId,
        questions: AnswerArrayObj,
        otherComments: freeText,
        salesAgentId: salesAgentId,
      }

      console.log("dataToSend ..>>>>>>>> ", dataToSend)
      try {
        console.log("<<<<<<<BEFORE RESPONSE FOR SEND FEEDBACK >>>>>>>>>")
        console.log("dataToSend >> ", dataToSend)
        console.log("config >> ", config)

        const res = await api.post("/", dataToSend, config)
        console.log(res)
        console.log("Res >> ", res)
        console.log("<<<<<<<AFTER RESPONSE FOR SEND_FEEDBACK_URL >>>>>>>>>")

        // eslint-disable-next-line no-prototype-builtins
        if (res.hasOwnProperty("data")) {
          // Get Response
          getSuccessScreen()
        } else {
          console.log("<<<<<<<ERRRRRROR>>>>>>>>>")
        }
      } catch (err) {
        console.log(err)
        Alert.alert("Error " + err)
      }
    }

    return (
      <ImageBackground source={Images.bg} style={FULL}>
        <ScrollView showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false}>
          <View style={BOTTOM_HALF}>
            <SafeAreaView>
              <Text style={SUBJECT}>Device Identified</Text>

              <View>
                <Text style={LABEL}>Barcode ID</Text>
                <Text style={REGULAR_TEXT}>{barcodeId}</Text>
              </View>

              <View>
                <Text style={LABEL}>Customer </Text>
                <Text style={REGULAR_TEXT}>{CustomerName}</Text>
              </View>

              <View>
                <Text style={LABEL}>
                  Please Fill the Form Below to Provide More Information on This Device{" "}
                </Text>
              </View>

              {renderInputRadios()}

              <View style={FOOTER_CONTENT}>
                <Button
                  testID="next-screen-button"
                  style={CONTINUE}
                  textStyle={CONTINUE_TEXT}
                  tx="inside.send_feedback"
                  onPress={onSendFeedbacck}
                />
              </View>
            </SafeAreaView>
          </View>
        </ScrollView>
      </ImageBackground>
    )
  },
)

您可以從上面的代碼中看到，我正在從用戶輸入創建一組臨時單選按鈕值，但我無法獲得用戶操作的結果

您還可以看到我正在為 answer1 到 answer7 創建臨時變量對象。 這將組件結果限制為只有七個

那是違反要求的

有沒有解決的辦法

謝謝

Answer 1

您可以在 object 中使用 object 您可以添加新鍵是否使用多個檢查值。

const [checkBoxStatus, setCheckBoxStatus] = useState({})