Question

我正在尝试将redux用于我的反应应用程序，但我在将数据渲染到我的组件时陷入困境。

当我在控制台上记录我的this.props.expositions时，它实际上第二次调用是第二次是一个空数组，第二次是与所有预期数据相同的数组。

那么这是我的代码：

import React from 'react';
import {connect} from 'react-redux';
import './exposition.css';
// import ExpoResult from './expo.result';
import { getExposition } from '../../redux.reducer/exposition/actions';

  

class Exposition extends React.Component {

  render()  {

console.log(this.props.expositions); 
    return (
      <div className="Exposition"> 
         <h1 className="uk-text-center">Expositions</h1>
         <ul>
             
              { 
               
                  this.props.expositions.length !== '' && this.props.expositions.map( (x, index) => { 
                    <li key={index}>
                      {x.name}
                    </li>
                  )
          }
         </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    expositions: state.exposition
  }
}
export default connect(mapStateToProps)(Exposition);

Answer 1

由于state.exposition或this.props.expositions在首次运行时为空，x.name可能是null或undefined，或者只是一个空字符串，这使得{ {1}}在不同的key上是唯一的。如果这是你的问题，那就是你得到错误的原因。

至于为什么li被调用两次，这是因为你的组件被渲染了两次。这意味着您的初始状态console.log(this.props.exposition)是一个空数组，并且第二次在其他地方稍后设置它。这可能是因为您在其他地方调用异步代码来设置state.exposition。

解决方案可以是：如果state.exposition为空，请不要在return方法中提取组件，即早期render。

this.props.expositions

Answer 2

编辑：您应该重新格式化以下代码和/或更改数据结构。

数组项目未呈现，因为您未返回它。将 expositions.map 的代码更改为此

<ul>
{
    this.props.expositions.length > 0 && this.props.expositions[0].length > 0 && this.props.expositions[0].map( (x, index) => { 
        return(
            <li key={index}>
                {x.name}
            </li>
        )
    )
}
</ul>

如果你想要你可以做这样的事情来显示数据是否存在或其他不存在的数据。

<div>
{ this.props.expositions[0].length > 0 ?
    (
    <div>
        <h2>Here's the array data.</h2>
        <ul>
        { this.props.expositions[0].map( (x, index) => { 
            return(
                <li key={index}>
                    {x.name}
                </li>
            )
        ) }
        </ul>
    </div>
    ) :
    (
    <div>
        <p>The content is empty.. or we're loading data please wait.</p>
    </div>
    )
}
</div>

React Redux独特的关键道具

2 个答案: