Question

我正在尝试设置电子邮件注册。我有一个带有TextInput的屏幕，我想重复使用该屏幕。我有一个EmailConnector，从中我可以导航到TextInputScreen。该TextInputScreen包含一个TextInputComponent。用户在这里输入他的电子邮件。如果电子邮件无效，我将抛出错误并尝试更新TextInputScreen中的错误消息。

我现在面临的问题是，当引发错误时，来自TextInputComponent的错误消息不会得到更新。

流是这样的：

用户在单独的屏幕上点击“通过电子邮件注册”->称为openEmailScreen
用户输入电子邮件并点击键盘上的“完成”按钮-> inputReceived被呼叫
如果电子邮件无效->在inputReceived中引发错误，并且在TextInputViewComponent中显示错误消息

在步骤3中刷新错误消息目前不起作用，我不知道如何使它起作用。

这是我的EmailConnector：

export default class EmailConnector {
    static keyboardTypes = {
        email: 'email-address',
        default: 'default',
    };

    static openEmailScreen = async navigation => {
        navigation.navigate('TextInputScreen', {
            placeholder: strings.onboarding.email_flow.email_placeholder,
            keyboardType: this.keyboardTypes.email,
            onKeyboardPressed: () => this.inputReceived(),
            errorMessage: 'placeholder message',
        })
    }
    //method called when the "Done" button from the keyboard is pressed
    static inputReceived = () => {
        try {
            const email = new SignUpUserBuilder().setEmail('testexample.com').build();//used to validate the email
        }
        catch(error) {
            console.log(error);
            ****//HERE I need to figure out a way to change props.errorMessage and force TextInputViewComponent to rerender****
            <TextInputViewComponent errorMessage = 'Invalid email'/>;
            const viewComponent = new TextInputViewComponent();
            viewComponent.forceUpdate();
        }
    } 
}

这是我的TextInputScreen：

class TextInputScreen extends Component {
    render() {
        return (
            <View style={styles.rootView}>
                <TextInputViewComponent 
                    placeholder={this.props.route.params.placeholder}
                    keyboardType={this.props.route.params.keyboardType}
                    onKeyboardPressed={this.props.route.params.onKeyboardPressed}
                    errorMessage={this.props.route.params.errorMessage}
                />
            </View>
        )
    }
}

export default TextInputScreen;

这是我的TextInputViewComponent：

class TextInputViewComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            shouldRefreshComponent: false
        }
    }

    refreshComponent = () => {
        this.setState({
            shouldRefreshComponent: true
        })
    }

    render() {
        return (
            <View> 
                <TextInput 
                    placeholder={this.props.placeholder}
                    placeholderTextColor={colors.placeholder}
                    keyboardType={this.props.keyboardType}
                    style={styles.textInput}
                    onSubmitEditing= {() => this.props.onKeyboardPressed()}
                />
                <Text 
                style={{fontSize: 18, color: colors.white}}
                ref={Text => { this._textError = Text}}>
                    {this.props.errorMessage}
                    </Text>
            </View>
        )
    }
}

export default TextInputViewComponent;

通过inputReceived方法，我尝试为forceUpdate调用setState和TextInputViewComponent，但是在两种情况下，我都会收到消息："Can't call forceUpdate/setState on a component that is not yet mounted" < / p>

任何帮助将不胜感激！

Answer 1

一般来说，如果我希望父组件更改其数据或在子组件更改时更新它，则将子函数传递给其道具。

例如

class Parent {
  state = {
    value: 1
  }
  updateValue() {
    this.setState({value: 2})
  }
  render() (
    <Child 
      updateValue={this.updateValue}
    />
  )

这样，我可以在孩子内部调用函数以更新父母的状态。

class Child {
 updateParent() {
   this.props.updateValue()
 }
}

强制使用新道具重新渲染外部组件

1 个答案: