添加输入动态反应 redux

如何解决添加输入动态反应 redux

你好这个问题我再问一次，因为我还是找不到答案 我尝试使用 react 和 redux 创建一个类似于谷歌表单的表单

每个问题代表：QuestionCard 包含一个标题并且可以有多种类型（短问题、长问题、选择、多项、单选......） 我设法添加 cardQuestion 并删除它们

我的问题是，当我选择单个选项时，我想让用户可以添加他想要的选项数量，但它不起作用

这是我的减速机

const initialState = {
    formId: '',form: {
        
        title: '',description: ''
    },basicForm: {
        fullName: '',age: '',saved: false
    },cardQuestion: [{
        
        title: '',choix: [],type: '',}],error: "",loading: false,}

const addRequestReducer = (state = initialState,action) => {

    switch (action.type) {
        case 'SET_STATE':
            return { ...state,...action.payload }
        default:
            return state
    }
}

我使用全局状态

这就是我尝试添加选择的方式

1- 我像这样处理输入的变化（每个选择）：

  const { cardQuestion } = useSelector((state) => state.addRequest)
const choice = cardQuestion.map(e => e.choix)

   const onChangeInput = (i,key,value) => {
        console.log(value)
        dispatch({
            type: 'SET_STATE',payload: {
                cardQuestion: cardQuestion.map((elem,index) => {
                    console.log(i)
                    console.log(i === index)
                    if (i !== index) return elem
                    return { ...elem,[`${key}`]: value }
                })
            }
        })
    }

2- 像这样使用 ChangeInptut

<div >{choice.map((elem,i) => <div key={i}>
                            <Input value={elem.choix} onChange={(e) => onChangeInput(i,'choix',e.target.value)} />
   </div>

3- 按钮添加新输入（选择）

<Button onClick={() => dispatch({
                                type: 'SET_STATE',payload: {
                                    cardQuestion: [...cardQuestion,{ choix: '' }]


                                }
                            })} >Add</Button>

                        </div>

但它给了我这样的结果：

当我在问题卡1中添加一个选项时，它也会在问题卡2中添加

我该如何解决这个问题，任何帮助将不胜感激

解决方法

这个

< #include "Arduino.h"
    #include <ArduinoBLE.h>
    #include "Nano33BLEAccelerometer.h"
    // #include "arduinoFFT.h"
    
    #define BLE_BUFFER_SIZES    20
    #define BLE_DEVICE_NAME     "Nano 33 BLE"
    #define BLE_LOCAL_NAME      "Accelerometer BLE"
    
    
    Nano33BLEAccelerometerData accelerometerData;
    
    BLEService BLEAccelerometer("590d65c7-3a0a-4023-a05a-6aaf2f22441c");
    BLECharacteristic accelerometerXBLE("0004",BLERead | BLENotify | BLEBroadcast,BLE_BUFFER_SIZES);
    BLECharacteristic accelerometerYBLE("0005",BLE_BUFFER_SIZES);
    BLECharacteristic accelerometerZBLE("0006",BLE_BUFFER_SIZES);
    
    
    char bleBuffer[BLE_BUFFER_SIZES];
    
    void setup()
    {
        Serial.begin(115200);
        while(!Serial);
    
        if (!BLE.begin()) 
        {
            while (1);    
        }
        else
        {
            BLE.setDeviceName(BLE_DEVICE_NAME);
            BLE.setLocalName(BLE_LOCAL_NAME);
            BLE.setAdvertisedService(BLEAccelerometer);
    
            BLEAccelerometer.addCharacteristic(accelerometerXBLE);
            BLEAccelerometer.addCharacteristic(accelerometerYBLE);
            BLEAccelerometer.addCharacteristic(accelerometerZBLE);
    
            BLE.addService(BLEAccelerometer);
            BLE.advertise();
    
            Accelerometer.begin();
            accelerometerXBLE.writeValue((byte)0x01);
            
            accelerometerYBLE.writeValue((byte)0x01);
            accelerometerZBLE.writeValue((byte)0x01); 
            Serial.println("X,Y,Z");
        }
    }
    
    void loop()
    {
        BLEDevice central = BLE.central();
        if(central)
        {
          Serial.println("Connected");
            int writeLength;
            while(central.connected())
            {            
                if(Accelerometer.pop(accelerometerData))
                {
                    writeLength = sprintf(bleBuffer,"%f",accelerometerData.x);
                    accelerometerXBLE.writeValue(bleBuffer);
                    writeLength = sprintf(bleBuffer,accelerometerData.y);
                    accelerometerYBLE.writeValue(bleBuffer);
                    writeLength = sprintf(bleBuffer,accelerometerData.z);
                    accelerometerZBLE.writeValue(bleBuffer);      
                    delay(1000);
                    Serial.printf("%f,%f,%f\r\n",accelerometerData.x,accelerometerData.y,accelerometerData.z);
                }
            }
        }
    } >

在卡片列表中添加一张没有标题或类型的新卡片。如果我理解正确，您想为现有卡片添加一个新选项，看起来像

cardQuestion: [...cardQuestion,{ choix: '' }]

但我不知道const newCards = [...cardQuestion] newCards[currentCardPosition] = {...newCards[currentCardPosition]} newCards[currentCardPosition].choix = [...newCards[currentCardPosition].choix,'' ] 会来自哪里