TextInput 值未更新答案

【问题标题】：TextInput value is not updatedTextInput 值未更新
【发布时间】：2020-01-09 15:30:20
【问题描述】：

我正在使用一个函数来更新 onChangeText 事件上的 TextInput 值。如果我在函数中的状态更新后控制台记录值，它会打印更新的值，但不会在输入中显示更新的值。 errorMessages 和 input 是状态（useState 挂钩）。知道如何解决这个问题吗？

我正在使用它来创建 useState 挂钩：

const errors = {
    name: null,
    // more fields
};

const inputs = {
    name: '',
    // more fields
};

const [input, setInput] = useState(inputs);
const [errorMessages, setErrorMessages] = useState(errors);

这是文本输入：

<Input
   label={'Name'}
   style={styles.input}
   blurOnSubmit
   autoCapitalize={'none'}
   autoCorrect={false}
   value={input['name']}
   onChangeText={value => handleInput('name', value)}
/>

以下是更新值的函数：

const handleError = (field, value) => {
    const errors = errorMessages;
    errors[field] = validate(field, value);
    setErrorMessages(errors);
};

const handleField = (field, value) => {
    console.log('input before: ' + input[field]) // prints the previous value correctly
    const updateData = input;
    updateData[field] += value;
    setInput(updateData);
    console.log('input after: ' + input[field]) // prints the updated value correctly
};

const handleInput = (field, value) => {
    handleError(field, value);
    handleField(field, value);
};

【问题讨论】：

尝试在 updateData[field] += value 行仅使用“=”；
是的，没错。但是由于输入没有更新其值，因此传递给函数的值只是最后按下的键。修复错误后，我必须将其更改为 =
然后，尝试另一件事：const updateData = { ...input }，创建另一个对象
成功了！创建一个新对象就可以了，非常感谢。想写一个答案，所以我将其标记为解决方案？

标签： react-native

【解决方案1】：

更新前需要创建一个新对象：

const handleError = (field, value) => {
    const errors = { ...errorMessages };

和

const handleField = (field, value) => {
    const updateData = { ...input };

【讨论】：

【解决方案2】：

可能是您尝试将整数值更新为字符串状态，那么您必须尝试以下方式，当您将整数值更新为字符串状态时，您必须使用

    const [text,setText] = useState('')
    setText(100)
    instead you use 
    setText(`100`)

那么只有它会将整数作为字符串。奇怪的是你根本不会得到任何错误，为什么初学者很难知道

【讨论】：