¿Cuál es la forma correcta de declarar accesorios predeterminados en reaccionar para que cuando llame al mapa en un accesorio que se asigna de forma asíncrona usando redux no obtenga un error indefinido? En este momento, con la siguiente sintaxis, recibo un error al intentar asignar trans_filter porque los datos no están definidos en la llamada inicial para renderizar.
class ContainerComponent extends React.Component { static defaultProps = { searchProps: { data: [] } }; constructor(props) { super(props); } render(){ let trans_filter = JSON.parse(JSON.stringify(this.props.searchProps.data)); } } const mapStateToProps = (state) => ({ searchProps: state.searchProps }); export default connect(mapStateToProps, {getTransactionsAll})(ContainerComponent);Así es como puede declarar accesorios predeterminados cuando usa la sintaxis de clase ES6 para crear componentes ReactJS:
class ContainerComponent extends React.Component { constructor(props) { super(props); } render(){ let trans_filter = JSON.parse(JSON.stringify(this.props.searchProps.data)); } } ContainerComponent.defaultProps = { searchProps: { data: [] } }; export default ContainerComponent; Además, hay otra sintaxis para declarar defaultProps . Este es un atajo, pero solo funcionará si su compilación tiene activados los inicializadores de propiedades ES7 . Supongo que es por eso que no funciona para usted, porque no veo problemas con su sintaxis:
class ContainerComponent extends React.Component { static defaultProps = { searchProps: { data: [] } }; constructor(props) { super(props); } render() { let trans_filter = JSON.parse(JSON.stringify(this.props.searchProps.data)); } } export default ContainerComponent;mapStateToProps , sí, ¡tiene algo que ver con Redux! El problema es causado por su reducer . Debe declarar la forma del estado inicial y, además, debe especificar el estado inicial en cada reductor. Redux llamará a nuestro reductor con un estado undefined por primera vez. Esta es nuestra oportunidad de devolver el estado inicial de nuestra aplicación.
Establecer estado inicial:
const searchPropsInitialState = { data: [] }; Luego, en tu reductor cuando manipulas searchProps haz:
function yourReducer(state = searchPropsInitialState, action) { // ... switch or whatever return state; }Para obtener más detalles, consulte el manejo de acciones en los documentos de Redux .