Question

我的redux状态工作良好，因为我的数据位于redux存储中。我可以使用console.log（this.props）进行console.log注销，但似乎无法将其渲染出来。它返回此错误：

TypeError: Cannot read property 'somevalue' of undefined

通常，我会使用html / jsx静态块在props上进行映射，但是每个循环我需要使用不同的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，然后推荐this

无法从Redux状态呈现道具的值

1 个答案: