Question

我有以下代码，每次尝试访问返回值内部的状态时，都会得到一个

TypeError：无法读取null的属性“ #property”

import React, {useEffect, Fragment} from 'react'
import {Row, Col} from 'react-bootstrap'
import {connect} from 'react-redux';
import PropTypes from 'prop-types'
import {getProduct} from '../../actions/produto'


const Product = ({getProduct, match, produto: {produto}}) => {

    useEffect(() => {
        getProduct(match.params.id);
    }, [getProduct, match.params.id]);

    console.log(produto);
    return (
        <Fragment>
            <Row>
                <Col>
                    {produto.name}
                </Col>                
            </Row>
        </Fragment>
    )
}

Product.propTypes = {
    getProduct: PropTypes.func.isRequired,
    produto: PropTypes.object.isRequired
}

const mapStateToProps = (state) =>({
    produto: state.produto
})

export default connect(mapStateToProps, {getProduct})(Product)

但是，如果我在返回前使用console.log（produto），则可以获得真实状态值。该状态具有正确的值，直到我尝试在return语句内访问{produto}为止。当我这样做时，它将更改为null。有人可以解释一下为什么会发生这种情况以及如何解决吗？

谢谢

Answer 1

这是我的减速器

   import {
        GET_PRODUCT,
        GET_PRODUCTS,
        GET_PRODUCT_ERROR,
        PRODUCT_LOADED
    } from '../actions/types'

    const initialState = {
        produto: null,
        produtos: []
    }

    export default function(state = initialState, action){
        const {type, payload} = action;
        switch(type){
            case GET_PRODUCT:
            case PRODUCT_LOADED:
                return{
                    ...state,
                    produto: payload
                }
            case GET_PRODUCTS:
               return {
                ...state,
                produtos: payload
               }
            case GET_PRODUCT_ERROR:
                return{
                    ...state,
                    produto: null,
                    produtos: null
                }
            default: 
                return state
        }
    }

Answer 2

我在这里找到了答案：React state is null inside of return

@ mo-ismat说：发生这种情况的原因是因为api调用是异步的，它不会立即填充状态，因此渲染首先发生并尝试从初始状态null读取.current。

这确实有效。我在呈现状态{produto && produto.name}值之前添加了条件，然后它就起作用了。

感谢所有帮助人员

返回状态内，反应状态为null

2 个答案: