javascript - 当子 prop 动态更改时，对象作为 React 子对象无效

Question

我正在尝试抽象一个我在应用程序中经常使用的模式，我可以在另一个屏幕中使用它，该屏幕应该发送来自另一个屏幕内的 TextInput 组件的 Prop 。问题是，当我将 TextInput 组件留空时，它会正常渲染模态框，但是当我向其中输入任何内容时，它会崩溃并引发 Objects are not valid as a react child 错误。我尝试使用 React.Children 通过多种方式映射子数组，但它仍然崩溃。

主要组件(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>
    }
}

The Other Screen that calls the modal with children

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)}
            />
    ...

Modal (I actually tried both functional and class components)

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

The error raised

Update 1: The TextInput Component使用 useState 钩子(Hook)

Answer 1

实际上能够解决这个问题。我的错误是，我没有使用 onChangeText，而是在输入组件上使用了 React 的 onChage，该组件将对象发送到模式，而不仅仅是文本。