Javascript 反应/重复：可以'；t映射到状态[对象]

试图穿越Redux React API丛林的黑暗深处——设法从API和console.log获取数据——但我和我的谷歌技能都没能找到为什么它不能呈现

反应成分

父组件：

class Instagram extends Component {
  componentWillMount(){
    this.props.fetchInfo();
  }

  render() {
    return (
      <div className="container">
        <div className="wrapper">
          <InstagramPost />
        </div>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ fetchInfo }, dispatch);
}

export default connect(null, mapDispatchToProps)(Instagram);

class InstagramPost extends Component {
  render() {
    console.log(this.props.info);
    this.props.info.map((p,i) => {
      console.log("PROPS ID: " + p.id);
    })

    return (
      <div>
        <h1>POSTS</h1>
        <ul className="uls">
          {
            this.props.info.map((inf, i) =>
              <li key={i}>{inf.id}</li>
            )
          }
        </ul>
      </div>
    )
  }
}

const mapStateToProps = ({ info }) => {
  return { info }
}

export default connect(mapStateToProps)(InstagramPost);

Redux减速器方法：

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_INFO:
      return action.payload.data;
    default:
      return state;
  }
}

JSON文件如下所示：

class InstagramPost extends Component {


render() {

    if(!this.props.info) return null

    return (
      <div>
        <h1>POSTS</h1>
        <ul className="uls">
          {
            this.props.info.map((inf, i) => {
              return <li key={i}>{inf.id}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

const mapStateToProps = ({ info }) => {
  return { info }
}

export default connect(mapStateToProps)(InstagramPost);

在控制台中-它工作，我得到我的对象：

状态也会更新：

---

但是当我映射到this.props.info，试图呈现this.props.info.id时，页面上没有呈现任何内容。。非常感谢您的任何意见

看起来在初始渲染时没有设置道具。我猜你的API调用还没有完成

首先尝试检查变量是否已设置或是否为数组：

大概是这样的：

class InstagramPost extends Component {


render() {

    if(!this.props.info) return null

    return (
      <div>
        <h1>POSTS</h1>
        <ul className="uls">
          {
            this.props.info.map((inf, i) => {
              return <li key={i}>{inf.id}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

const mapStateToProps = ({ info }) => {
  return { info }
}

export default connect(mapStateToProps)(InstagramPost);

InstagramPost类扩展组件{ render（）{ 如果（！this.props.info）返回null 返回( 帖子

{ this.props.info.map（（inf，i）=>{ 返回
• {inf.id}
}) }

) } } 常量mapStateToProps=（{info}）=>{ 返回{info} } 导出默认连接（MapStateTops）（InstagramPost）；

---

或者您可能需要检查长度

this.props.info.length>0

有两个问题。正如Mayank Shukla指出的，由于块大括号（

{}

）没有返回语句，所以映射回调没有返回任何内容

另一个问题是减速器。由于

info

的redux状态是一个用户数组，因此需要替换

FETCH\u info

上的旧状态，而不是将获取的数组添加到它的开头。否则，您将维护一个用户数组数组，在每次获取时将增加一个

请注意，您不需要对

此.props.info

进行任何检查，因为它将由您的reducer和

[].map（f）=[]

初始化为

[]

对于redux调试，我非常推荐安装，因为它将允许您检查存储的所有更新。每个项目都需要一点设置，但这很值得

---

哦，将来，您可能希望避免使用评论/答案中的建议更新您的问题，因为该问题对其他访问者不再有意义：-）

您在console中看到的输出是这一行的结果

console.log（“PROPS:+this.PROPS.info”）？？@MayankShukla感谢您的回复！它显示在“道具：[对象对象对象]，[对象对象对象]，[对象对象对象]，[对象对象]，[对象对象对象]，[对象对象对象]，[对象对象]，[对象对象对象]…”上面的图像中。请尝试移除
“道具：”+
部分，以便您可以检查对象。@fransBernhard问题是您没有从地图主体返回任何东西，使用以下命令：
{this.props.info？this.props.info.map（（inf，i）=>（
{inf.id}
）：null}
或在此处明确添加
return
：
return
…
/code>@Oblosys感谢您的回复！我删除了“道具：”并更新了问题中的截图！但是，如果道具在稍后加载，它将使用可用数据重新渲染，这又有什么关系呢？是的，您是对的，但看起来您正在尝试调用
.map（）
在未定义或不是数组的变量上，这可能会引发错误并停止初始render@Stretch0谢谢您的回复！我更新了我的问题和屏幕。否我检查this.props.info是否存在，并尝试在子组件中记录console.log“this.props.info.id”，正如您所说，console.logs“props id”未定义：（理想情况下，当您开始提取时，应该将
加载
布尔值设置为true。这将有助于避免这些错误。此外，如果您只需要在列表上迭代，请使用
forEach
，
映射
用于重建现有数组。@fransBernhard您需要从映射函数返回一些内容。我有更新我给你举了一个例子。我还移动了info变量的检查以使它更清楚。谢谢@Obiosys的回答和建议！