React + Redux Requisiten laden nicht in der Zeit

Question

Ich versuche, einen ClassName Wert basierend auf Daten von Redux erhalten und an meine Komponenten Requisiten übergeben. Aber mit diesem Code erhalte ich gerade diesen Fehler:

Uncaught TypeError: Cannot read property '0' of null 

Es sieht für mich aus, dass die Stützen noch nicht empfangen worden sind. Ich habe von der Verwendung von Default-/Fallback-Requisiten gehört, konnte sie aber nicht erfolgreich implementieren.

Wie kann ich das beheben?

calcROI() { 
    const myNum = (this.props.value1[0] + this.props.value2[0]); 

    let spanClassname = ''; 

    if(myNum < 0) { 
     spanClassname = 'my-class'; 
    } 

    const myNewNum = myNum.toFixed(0); 

    return { 
     spanClassname, 
     value : myNewNum 
    } 
} 

render() { 
    const {value3} = this.props; 
    const {spanClassname, value} = this.calcROI(); 

    return (
     <span className={spanClassname}> 
      My value is: {value + value3} 
     </span> 
    ); 

} 

Answer 1

Eine Lösung ist, einen Standardwert, in diesem Fall verwenden 0 ist ein paar zusätzliche Bedingungen hinzufügen, wenn myNum erklärt:

// check if this.props.value1 and value2 exists and their lengths > 1 
 
const isMyNumExists = (this.props.value1 && this.props.value1.length > 1) 
 
    && (this.props.value2 && this.props.value2.length > 1); 
 

 
// if isMyNumExists is false or props is undefined, set myNum to 0 
 
const myNum = this.props && isMyNumExists ? 
 
    (this.props.value1[0] + this.props.value2[0]) : 0;

AKTUALISIERT Wenn Sie jedoch stattdessen Standardrequisiten festlegen möchten. Sie können dies tun, indem Sie propTypes.defaultProps verwenden oder die Standardrequisiten in mapStateToProps setzen. Der zweite Fall ist nur gültig, wenn Sie value1 und value2 vom Status erhalten, was ich glaube, was Sie tun. Der Standardwert beider Beispiele ist [0].

Mit defaultProps:

// ... the rest of your import 
import PropTypes from 'prop-types'; 


class MyClass extends Component { 
    // ... your code here 
} 

// insert default value here... 
MyClass.defaultProps = { 
    value1: [0], 
    value2: [0] 
}; 

Einstellung Standardwert in mapStateToProps:

const mapDispatchToProps = (store) => ({ 
    value1: store.value1 || [0], 
    value2: store.value2 || [0] 
})