react-native - TextInput 值未更新

Question

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

我正在使用它来创建 useState Hook :

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);
};

Answer 1

您需要在更新前创建一个新对象:

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

和

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