this.setState不适用于react-native中的多个文本输入

Question

    {
      element.answers_data.map((answer, index) =>
          <View key={index} style={{paddingLeft: 20}}>
          <TextInput
            value = {answer.answer_text}
             onChangeText={(answer_text) => {
               this.setState({answer_text: answer_text});
             }}
            />
          </View>
    )}

我在数组中使用TextInput。但它没有用。请提供任何解决方案。提前致谢

Answer 1

如果你的文本输入是一个数组，你应该使它的反射state也是一个数组：

constructor(props) {
    super(props);
    this.state = {
        answers: element.answers_data.map( (answer, index) => {
            return answer.answer_text
        }),
    }
}

render() {
    return (
        <View>
        {
        element.answers_data.map((answer, index) =>
            <View key={index} style={{paddingLeft: 20}}>
                <TextInput
                    value = {this.state.answers[index]}
                    onChangeText={(answer_text) => {
                        /// Since state is immutable, construct a new array for modified answer for specific index.
                        this.setState({
                            answers: [
                                ...this.state.answers.slice(0, index),
                                answer_text,
                                ...this.state.answers.slice(index+1, this.state.answers.length)
                            ]
                        });
                    }}
                />
            </View>
        )
        }
        </View>
    )
}

由于状态是不可变的，因此您不能仅使用索引更改数组值。检查代码，例如为修改后的answer构造一个新数组。

Answer 2

您是否尝试使用多个输入更改同一个状态字段？ 你可以分开吗？ 关于不工作，你是什么意思，组件更新但状态没有改变，回调没有调用，你总是得到相同的answer_text，或其他什么？