Question

我正在尝试根据从Redux收到的数据切换className值并传递给我的组件props。但是使用此代码我只是收到此错误：

Uncaught TypeError: Cannot read property '0' of null

在我看来尚未收到道具。我听说过使用默认/回退道具但是没有成功实现它们。

我该如何解决这个问题？

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

一种解决方案是使用默认值，在这种情况下为0时，在声明myNum时添加一些额外条件：

// 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;

<强>已更新

但是，如果您想要设置默认道具。您可以使用propTypes.defaultProps或在mapStateToProps中设置默认道具来完成此操作。第二种情况只有在你从州获得value1和value2时才有效，我相信你在做什么。两个示例的默认值均为[0]。

使用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]
};

在mapStateToProps中设置默认值：

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

React + Redux道具无法及时加载

1 个答案: