Question

我正在从对动作的调度调用中收集图像，并将返回的响应（图像）映射到数组中。最终返回数据后，我将通过设置imgArray属性的状态来存储此映射。不幸的是，当我这样做时，我得到一条警告“只能更新一个已安装的或正在安装的组件”，并且我的imgArray属性的状态在渲染函数中不可用或未更新（因此没有图像被移位）。如何通过首先将数据存储在状态下来消除此警告，并将数据发送到render函数？

componentWillMount函数：

componentWillMount() {
    this.props.dispatch(handleLoadProduct(this.props.product.id)).then((data) => {
        let images = data.response.images.map(img => {
            return 'https://b2b.martinsmart.com/productimages/' + img.original;
        });

        this.setState({imgArray: images});    
    });
}

即使在reducer中将isLoading属性设置为true，它在此处仍显示为false，然后在加载所有数据之前调用渲染器。

渲染功能：

render() {
    const {isLoading, product} = this.props.products;

    if (isLoading) {
        return <Loader isVisible={true}/>;
    }

    return (
        <View ref={(pc) => this.productCard = pc} style={{height: '100%', backgroundColor: '#D6D6D6'}}>
            <Header/>
            <View style={styles.wrapper}>
                <View style={{height: '100%', borderRadius: 7}}>
                    <View style={styles.container}>
                        {this.state.imgArray &&
                            <Animated.Image
                                {...this.imgPanResponder.panHandlers}
                                key={'image' + this.state.imgIndex}
                                source={{uri: this.state.imgArray[this.state.imgIndex]}}
                                style={{left: this.imgXPos, width: '100%', height: '100%'}}
                                resizeMethod={'resize'}
                                resizeMode={'contain'}
                            />
                        }

我在这里上传了一个演示此视频的视频：https://youtu.be/tAbaq2IS4vY

这是我的减速器案例：

    case types.HANDLE_LOAD_PRODUCT: {
        return {
            ...state,
            isLoading: true,
            product:{}
        };
    }

这是我的动作功能：

export function handleLoadProduct(productId) {
    return (dispatch, getState) => {
        if (getState().app.hasNetworkConnection) {
            dispatch({
                type: types.HANDLE_LOAD_PRODUCT
            });

            return API.getProduct(productId).then((response) => {
                return dispatch({
                    type: types.HANDLE_LOAD_PRODUCT_SUCCESS,
                    response
                });
            });
        }
    };
}

这是我从异径管连接产品的方式：

function mapStateToProps(state) {
    const {products} = state;
    return {
        products
    };
}

export default connect(mapStateToProps)(ProductCard);

Answer 1

要解决图像未显示的问题，请从componentWillMount切换到componentDidMount。通常，使用componentDidMount进行API调用。

但是，警告可能是由于多种原因引起的。尝试use refs。如果要在屏幕之间切换，那也可能会引起问题！

还要检查React文档中的isMounted post。我猜想组件只是卸载，然后状态改变。尝试在console.log()上使用componentWillUnmount()，并找出在调用this.setState()来更改状态之前是否卸载了组件。您的代码示例中发生了很多事情，这就是为什么很难确切说明导致警告出现的原因。但是这些应该会给您一个很好的线索。

如何在componentWillMount中更新状态并在React Native中的渲染函数中使用该值？

1 个答案: