React状态二次调用Save函数未更新，后续恢复正常的问题求助

问题现象 #

• 首次调用Save()函数，状态正常更新为包含单个子数组的数组
• 第二次调用Save()，状态无任何变化
• 第三次及之后调用Save()，状态可正常追加新的子数组

核心代码片段 #

const [state, setState] = useState(null)

function Save(){
    if(state){
        setState((prev)=>[...prev, [p1, p2, p3, p4]])
    }else{
        setState([[p1, p2, p3, p4]])
    }
}

状态变化示例 #

首次调用后状态：

Array [
  Array [
    1,
    2,
    3,
    4
  ],
]

第三次及之后调用后状态：

Array [
  Array [
    1,
    2,
    3,
    4
  ],
  Array [
    5,
    6,
    7,
    8
  ],
  ....
]

完整组件代码 #

export default function ModalForm({close}) {
    const { state, setState } = useStateContext()
    const [name, setName] = useState('')

    const [p1, setP1] = useState('')
    const [p2, setP2] = useState('')
    const [p3, setP3] = useState('')
    const [p4, setP4] = useState('')

    const [v1, setV1] = useState('')
    const [v2, setV2] = useState('')
    const [v3, setV3] = useState('')
    const [v4, setV4] = useState('')
    const [v5, setV5] = useState('')

    async function Save(){
        setState((prev) => {
            if (prev) {
                let id = state.length
                return([...prev, [name, id, p1, p2, p3, p4, v1, v2, v3, v4, v5]])
            } else {
                return([[name, 0, p1, p2, p3, p4, v1, v2, v3, v4, v5]])
            }
        })
    }

    return (
        <Pressable style={styles.centeredView} onPress={() => close()}>
            <ScrollView>
                <Pressable style={styles.modalView} onPress={() => console.log('hi')}>
                    <Text style={styles.modalText}>Make new!</Text>
                    <TextInput
                        textAlign='center'
                        style={styles.textInput}
                        onChangeText={text => setName(text)}
                        value={name}
                        placeholder="Name"
                    />
                    <TextInput
                        textAlign='center'
                        style={styles.textInput}
                        keyboardType = 'numeric'
                        onChangeText={text => setP1(text)}
                        value={p1}
                        placeholder="Period 1"
                    />
                    <TextInput
                        textAlign='center'
                        style={styles.textInput}
                        keyboardType = 'numeric'
                        onChangeText={text => setP2(text)}
                        value={p2}
                        placeholder="Period 2"
                    />
                    <TextInput
                        textAlign='center'
                        style={styles.textInput}
                        keyboardType = 'numeric'
                        onChangeText={text => setP3(text)}
                        value={p3}
                        placeholder="Period 3"
                    />
                    <TextInput
                        textAlign='center'
                        style={styles.textInput}
                        keyboardType = 'numeric'
                        onChangeText={text => setP4(text)}
                        value={p4}
                        placeholder="Period 4"
                    />
                    <TextInput
                        textAlign='center'
                        style={styles.textInput}
                        keyboardType = 'numeric'
                        onChangeText={text => setV1(text)}
                        value={v1}
                        placeholder="Voltage 1"
                    />
                    <TextInput
                        textAlign='center'
                        style={styles.textInput}
                        keyboardType = 'numeric'
                        onChangeText={text => setV2(text)}
                        value={v2}
                        placeholder="Voltage 2"
                    />
                    <TextInput
                        textAlign='center'
                        style={styles.textInput}
                        keyboardType = 'numeric'
                        onChangeText={text => setV3(text)}
                        value={v3}
                        placeholder="Voltage 3"
                    />
                    <TextInput
                        textAlign='center'
                        style={styles.textInput}
                        keyboardType = 'numeric'
                        onChangeText={text => setV4(text)}
                        value={v4}
                        placeholder="Voltage 4"
                    />
                    <TextInput
                        textAlign='center'
                        style={styles.textInput}
                        keyboardType = 'numeric'
                        onChangeText={text => setV5(text)}
                        value={v5}
                        placeholder="Voltage 5"
                    />
                    <Pressable
                        style={[styles.button, styles.buttonClose]}
                        onPress={() => {
                            Save()
                            close()
                        }}>
                        <Text style={styles.textStyle}>Save</Text>
                    </Pressable>
                </Pressable>
            </ScrollView>
        </Pressable>
    )
}

状态展示代码（FlatList） #

<FlatList
    data={state}
    renderItem={Item}
    keyExtractor={item => item[1]}
    ListEmptyComponent={Empty}    
    styles={styles.container}     
    />

补充说明 #

已尝试参考相关修改方案调整代码，但问题依然存在。

内容的提问来源于stack exchange，提问作者Vladimir Kutsev