javascript - react /归零 : Can't map over state [object Object]

Question

试图在 Redux-React-API 丛林的黑暗深处找到方向 - 设法从 API 和 console.log 中获取数据 - 但我和我的 Google 技能都无法找出它不呈现的原因。

react 组件

父组件:

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 Action 方法:

const ROOT_URL = 'https://jsonplaceholder.typicode.com/posts';

export const fetchInfo = () => {
  const request = axios.get(ROOT_URL);
  return {
    type: types.FETCH_INFO,
    payload: request
  };
}

Redux Reducer 方法:

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

JSON 文件如下所示:

在控制台中 - 它有效并且我得到了我的对象:

状态也更新了:

但是当我在 this.props.info 上映射时，试图呈现 this.props.info.id，页面上什么也没有呈现。非常感谢任何输入!

Answer 1

看起来您的 Prop 未在初始渲染中设置。我猜您的 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);

或者您可能想要检查长度 this.props.info.length > 0。