javascript - 来自 TextInput 的 onChangeText 正在复制 React Native 上的文本

Question

我正在开发一个“谷歌表单”风格的应用程序，您可以在其中创建许多不同的表单。我在回答表单时在 TextInput 中遇到问题。首先让我解释一下表单响应系统是如何工作的。当用户打开屏幕回答表单时，他/她通过 redux 收到一个包含表单问题的对象数组，因此我使用 map() 滚动浏览每个问题并创建一个包含答案的新数组，该数组开始为空. 之后，我为每个文本类型问题呈现一个 TextInput。问题是当我尝试更改 TextInput 的文本时，它的值加倍。

示例：如果我输入“rrk”，它将显示“rrkrrk”。

奇怪的是，如果我将任何 console.warn () 放在文本更改函数中，问题就会消失并且 TextInput 可以正常工作。

我从我录制的两个视频中放了两个链接，显示发生了什么。使用 console.warn：https ://www.youtube.com/watch?v= 6AZE1R46zFA 没有 console.warn：https ://www.youtube.com/watch?v=2bAId-cP8eY

//Create array with answers based on question type
export const createInputs = (forms, formOpenKey) => {
    return dispatch => {
        const formData = forms[formOpenKey]
        const responses = []
        formData.quizes.map((quiz, index) => {
            switch(quiz.type) {
                case 'TEXT': responses.push(''); break
                case 'YES_NO': responses.push(false); break
                case 'MULTIPLE_CHOICE': responses.push(0); break
                case 'SELECTION': responses.push(Array(quiz.options.length).fill(false)); break
            }
        })
        dispatch({ type: ADD_RESPONSE_SET_INPUTS, payload: responses })
    }
}

export const changeResponse = (newValue, indexQuiz, itemIndex, itensArray) => {
    return dispatch => {
        console.warn('With this warn, TextInput works normally')
        let selectionArray
        if (itensArray) {
            selectionArray = itensArray.slice()
            selectionArray[itemIndex] = newValue
        }
        dispatch({ type:  ADD_RESPONSE_CHANGE_ITEM, payload: itensArray ? selectionArray : newValue, id: indexQuiz })
    }
}
case ADD_RESPONSE_CHANGE_ITEM:
            return { ...state,
                formResponse: state.formResponse.map((response, index) => index === action.id
                ? action.payload
                : response
            )}


//My class that renders each of the questions to the user
class ResponseInput extends React.Component {
    shouldComponentUpdate(nextProps, nextState){
        return (JSON.stringify(this.props.formResponse[this.props.index]) !== JSON.stringify(nextProps.formResponse[this.props.index]) || nextProps.formResponseError.includes(this.props.index))
    }
    render() {
        const { quizInfo, index, formResponse, changeResponse, formResponseError, disabled, response } = this.props
        console.warn('render input')
        return (
            <Surface style={ styles.backgroundFormItem }>
                <Text style={ styles.title }>{ quizInfo.title }</Text>
                { quizInfo.required ? <Text style={ styles.required }>Resposta Obrigatória</Text> : null }
                <View style={{ marginBottom: 10 }}/>
                { getResponseType(quizInfo, index, disabled ? response : formResponse[index], changeResponse, disabled) }
                <View style={{ marginBottom: 12 }}/>
                { !disabled && formResponseError.includes(index) ? <View style={ styles.errorLine }/> : null }
            </Surface>
        ) 
    }
}
mapStateToProps = state => ({
    formResponse: state.addResponse.formResponse,
    formResponseError: state.addResponse.formResponseError,
})
export default connect(mapStateToProps, { changeResponse })(ResponseInput)


//The function that returns the answer component type based on the question type (I just left the text, which is what matters)
const getResponseType = (info, indexQuiz, response, changeResponse, disabled) => {
    switch(info.type) {
        case 'TEXT':
            return (
                <TextInput editable={ !disabled } selectTextOnFocus value={ response } onChangeText={ text => changeResponse(text, indexQuiz) } selectionColor={ colors.primary } style={ styles.responseInputText } placeholder='Escreva a resposta'/>
            )
    }
}

标签： javascriptreact-nativereact-redux