Ошибка «Не определено не является объектом (оценивается как row [0] .val»)

Question

Это код PayScrn.js. Когда я нажимаю кнопку «Добавить», я получаю сообщение об ошибке «Undefined is not a object (оценивающий 'row [0] .val')", присутствующий на выставке. Я не могу понять, как это произошло.

import React, { useState } from 'react';
import { View,Button} from 'react-native';

const PayScrn = props => {
    const [row, addRow] = useState([]);
    const addItem = () => {
        addRow([...row,{ val: '20', type: 'Credit card' }]);
        alert(row[0].val)
    };
    return (
        <View>
             <Button onPress={addItem} title='Add' />
        </View>
    );
};

Answer 1

addRow является асинхронным. Для просмотра обновленного результата используйте useEffect ()

useEffect(() => { console.log(row)}, row)

Каждый раз, когда row обновляется, useEffect будет называться

useEffect