Question

我有一个连接到Redux Store的React Container。我的Redux商店有一系列数据，我在mapStateToProps中使用。但我无法在JSX中使用它。没有错误。但是，浏览器中不显示任何内容。记录对象的控制台提供属性。

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

class CurrentStore extends React.Component {
  render () {
    console.log(this.props.current);
    return (
      <div className='centered row'>
        <div className='column'>
          {this.props.current.name}
        </div>
      </div>
    );
  }
}

function mapStateToProps (state, ownProps) {
  return {
    current: state.app.stores.filter(s => s._id === ownProps.match.params.storeId)
  }
}

export default connect(mapStateToProps)(CurrentStore);

Answer 1

Array.prototype.filter为您提供了一组值，这意味着您的current对象实际上是一个对象数组。

因此，您应该更改mapStateToProps以返回第一个值，例如：

function mapStateToProps (state, ownProps) {
  return {
    current: state.app.stores.filter(s => s._id === ownProps.match.params.storeId)[0]
  }
}

，或者你应该在渲染功能中使用它（看起来更合适）

class CurrentStore extends React.Component {
  render () {
    console.log(this.props.current);
    return (
      <div className='centered row'>
          { this.props.current && this.props.current.map( item => <div className='column'>{ item.name }</div>}
      </div>
    );
  }
}

在渲染中，现在可能会返回多于1个项目，如果你不想要，你可以改变渲染只采取第一个项目

class CurrentStore extends React.Component {
  render () {
    let { current } = this.props;
    if (!current || !current[0]) {
        return null;
    }
    return (
      <div className='centered row'>
          <div className='column'>{ current[0].name }</div>
      </div>
    );
  }
}

为什么在JSX中使用时，对象数据不会显示在浏览器中？

1 个答案: