無法從 redux state 渲染道具值

Question

我有一個 redux state 工作正常，因為我的數據在 redux 存儲中。 我可以使用 console.log(this.props) console.log 將其注銷，但我似乎無法將其渲染出來。 它返回此錯誤：

TypeError: Cannot read property 'somevalue' of undefined

通常我會 map 通過帶有 html/jsx 塊的 static 塊的道具，但我需要這是不同的 html 每個循環的值，所以我試圖直接插入標記。 誰能指出我正確的方向？

import React, {Component} from 'react';
import { connect } from 'react-redux';

class UnitClass extends Component {
    state = {
        unit: {}
    }

    render() {
        console.log('Props is:', this.props); // shows correct values
        return (
            <ul>
               <li>{this.props.unit.somevalue.value1}</li>
               <li>{this.props.unit.somevalue.value2}</li>
               <li>{this.props.unit.somevalue.value3}</li>
               <li>{this.props.unit.somevalue.value4.someothervalue}</li>
            </ul>
        );
    }
}

const mapStateToProps = state => ({
    unit: state.setUnit.unit,
});

export default connect(mapStateToProps)(UnitClass);

Answer 1

嘗試這樣的事情

 render() {
        console.log('Props is:', this.props); // shows correct values
        const {unit} = this.props;
        return (
            <ul>
            {unit.somevalue && unit.somevalue.map((value)=>{
            return value.someothervalue? <li>{value.someothervalue}</li>: <li>{value}</li>})
            }  
            </ul>
        );
    }

注意：對於條件渲染，您可以使用ternary operator ，如果您必須處理嵌套條件渲染，那么我會推薦Higher Order Components ，然后可能是這個