React + Redux 道具没有及时加载

Question

我正在尝试根据从 Redux 接收并传递给我的组件道具的数据来切换 className 值。但是使用这段代码我只是收到这个错误：

Uncaught TypeError: Cannot read property '0' of null

看来道具还没收到呢。我听说过使用 default/fallback 道具，但没有成功实施。

我该如何解决这个问题？

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].

使用默认道具：

// ... 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 道具没有及时加载

React + Redux props not loading in time

javascript

css

reactjs

redux

flux