添加输入动态反应 redux

Question

你好我再问这个问题因为我还是找不到答案我尝试使用 React 和 redux

创建类似于 google 表单的表单

每个问题由：QuestionCard 表示包含一个标题，可以有多种类型（短问题、长问题、选择、多项、单项选择……）我设法添加和删除了 cardQuestion

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

这是我的减速机

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 中

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

Answer 1

这个

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

在卡片列表中添加一张没有标题或类型的新卡片。如果我没理解错的话，你想给现有的卡片添加一个新的选择，看起来像

const newCards = [...cardQuestion]
newCards[currentCardPosition] = {...newCards[currentCardPosition]}
newCards[currentCardPosition].choix = [...newCards[currentCardPosition].choix, '' ]

但我看不出 currentCardPosition 的来源

添加输入动态反应 redux

add inputs dynamically react redux

dynamicform

reactjs

redux