模式在HTTP Post请求成功后不显示

Question

我试图在onSubmit()中显示一个成功的post请求后显示自定义模态组件，但它不会显示出来。在制作post请求之前，我验证了答案，如果它们无效，则模式弹出良好。我做错了什么?

组件

function ReorderingScreen(props) {
let ModalView: AlertModal | null = null;
const [answers, setAnswers] = useState([]);
const [modelOptions, setModelOptions] = useState({message: '', isSuccess: false});
const validateAnswers = () => {
return answers && answers.length && answers.filter(x => x.number && x.number > 0).length > 0;
}
const onSubmit = () => {
if ( !validateAnswers()) {
setModelOptions({message: "Invalid entry", isSuccess: false })
ModalView.setModalVisible(true); // modal pop ups fine
return;
}
ProductService.reorder(answers)
.then(function (response) {
setModelOptions({message: "Order Submitted", isSuccess: true });
ModalView.setModalVisible(true); // modal does not pop up 
});
}
return (
<View>
<StickyBottomView
buttons={[{
title: "Submit",
onPress: () => { onSubmit() }
}]}
/>
<AlertModal
ref={(ref) => ModalView = ref}
isSuccess={modelOptions.isSuccess}
message={modelOptions.message}
clickOutsideToDismiss={true}
onDismiss={() => {
ModalView.setModalVisible(false);
}}
buttons={[
{
title: "Ok",
onPress: () => { ModalView.setModalVisible(false) }
}
]}
/>
</View>
)
}

AlertModal

export default class AlertModal extends Component {
static propTypes = {
isSuccess: PropTypes.bool,
title: PropTypes.string,
message: PropTypes.string,
buttons: PropTypes.array,
onDismiss: PropTypes.func,
clickOutsideToDismiss: PropTypes.bool,
}
static defaultProps = {
isSuccess: false,
message: 'Unknown Error',
buttons: [],
onDismiss: () => {},
clickOutsideToDismiss: false,
}
setModalVisible(visible) {
this.ModalView.setModalVisible(visible)
}
renderButton = (button) => {
return (
<PrimaryButton
title={button.title}
style={{ width: '100%', marginBottom: StyleConstants.margin.none }}
onPress={button.onPress}
isColorReversed={button.isColorReversed}
isWarningColor={button.isWarningColor}
/>
)
}
renderTitle = () => {
return (
<Text style={{...ComponentStyles.Text.phaseTitle, marginBottom: StyleConstants.margin.small}}>{this.props.title}</Text>
)
}
render() {
return (
<ModalView
ref={(ref) => this.ModalView = ref}
onDismiss={this.props.onDismiss}
clickOutsideToDismiss={this.props.clickOutsideToDismiss}
>
<View style={{ padding: StyleConstants.margin.small }}>
<View style={{ alignItems: 'center' }}>
<Image style={{width: 54, height: 50, marginBottom: StyleConstants.margin.medium }} source={this.props.isSuccess ? require('@Images/okay-status-ic.png') : require('@Images/warning.png')} resizeMode='contain' />
{ this.props.title && this.renderTitle() }
<Text style={{ fontSize: StyleConstants.fontSize.small, fontFamily: StyleConstants.font.regular, textAlign: 'center'}}>{ this.props.message }</Text>
{ this.props.buttons.map(button => {
return this.renderButton(button)
}) }
</View>
</View>
</ModalView>
);
}
}

ProductService

export default class ProductService extends AbstractService {
static reorder() {
return this.post(Config.endpoints.reorder, answers);
}
}

AbstractService

class AbstractService {
static post(url, data, queryParams) {
return this.request({
method: 'post',
url,
data: data,
queryParams
})
}
}

Answer 1

我找到了一个解决方案，我必须使用useRef

const onSubmit = () => {
ProductService.reorder(answers)
.then(function (response) {
setModelOptions({message: "Worked", isSuccess: true })
ModalView.current.setModalVisible(true);
})
}
render() {
return (
<ModalView
ref={ModalView}
onDismiss={this.props.onDismiss}
clickOutsideToDismiss={this.props.clickOutsideToDismiss}
>
<View style={{ padding: StyleConstants.margin.small }}>
<View style={{ alignItems: 'center' }}>
<Image style={{width: 54, height: 50, marginBottom: StyleConstants.margin.medium }} source={this.props.isSuccess ? require('@Images/okay-status-ic.png') : require('@Images/warning.png')} resizeMode='contain' />
{ this.props.title && this.renderTitle() }
<Text style={{ fontSize: StyleConstants.fontSize.small, fontFamily: StyleConstants.font.regular, textAlign: 'center'}}>{ this.props.message }</Text>
{ this.props.buttons.map(button => {
return this.renderButton(button)
}) }
</View>
</View>
</ModalView>
);
}