當子道具動態變化時，對象作為 React 子對象無效

Question

我正在嘗試抽象我在我的應用程序中經常使用的模式，我可以在另一個屏幕中使用它，該屏幕應該發送來自另一個屏幕內的 TextInput 組件的道具。 問題是，當我將 TextInput 組件留空時，它會正常呈現 Modal，但是當我向它輸入任何內容時，它會崩潰，引發Objects are not valid as a react child error。 我嘗試使用React.Children到 map 子數組，但它仍然崩潰了。

主要組件（FirstStep 是另一個屏幕）：

import React, { useState } from 'react';
import FirstStep from "./components/firstStep";
import { Text } from "react-native";

export default function signInScreen({ navigation, ...props }) {
    const [step, setStep] = useState(0);
    const [username, setUsername] = useState("");

    switch (step) {
        case 0:
            return (
                <FirstStep
                    username={username}
                    setUsername={setUsername}
                    setStep={setStep}
                    navigate={navigation.navigate}
                />
            )
        default:
            return <Text>Ola</Text>
    }
}

調用帶有子模式的其他屏幕

export default function firstStep({ username, setUsername, setStep, navigate }) {
    const [modalVisibility, setModalVisibility] = useState(false);

    return (
        <Container>
            <InformationModal
                visibility={modalVisibility}
                transparency={true}
            >
                <ModalHeader>
                    <ModalHeaderText color={light_gray}>Ola, <ModalHeaderText color={light_green}>{username}</ModalHeaderText></ModalHeaderText>
                </ModalHeader>
            </InformationModal>
            <NameInput
                placeholder="Nome"
                placeholderTextColor={light_green}
                onSubmitEditing={() => setStep(1)}
                value={username}
                onChange={value => setUsername(value)}
            />
    ...

模態（我實際上嘗試了功能組件和 class 組件）

import React, { Component } from 'react';
import { Modal, Container, SubContainer } from './styles';
import { View } from 'react-native';

export default class InformationModal extends Component {
    render() {
        const children = this.props.children;
        const { height, visibility, transparency, animationType } = this.props;

        return (
            <Modal
                visible={visibility}
                transparent={transparency}
                animationType={animationType}
            >
                <Container>
                    <SubContainer height={height}>
                        <View>
                            {children}
                        </View>
                    </SubContainer>
                </Container>
            </Modal>
        );
    }
}

提出的錯誤

更新 1：使用 useState 掛鈎的 TextInput 組件

Answer 1

實際上能夠解決這個問題。 我的錯誤是，我沒有使用onChangeText ，而是在我的輸入組件上使用了 React 的onChage ，它將 object 發送到模態，而不僅僅是文本。