Question

尝试在Redux-React-API丛林深处进行定位 - 设法从API和console.log中获取数据 - 但是我和我的Google技能都没有设法找出它为什么不呈现。< / p>

反应组件

父组件：

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

看起来你的道具没有在初始渲染上设置。我猜你的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的长度。

Answer 2

有两个问题。正如Mayank Shukla指出的那样，由于没有返回语句的块括号（default），地图回调没有返回任何内容。

另一个问题是减速机。由于{}的redux状态是一个用户数组，您需要替换info上的旧状态，而不是将获取的数组添加到它的开头。否则，您将维护一组用户数组，每次获取时将增加一个。

请注意，您不需要对FETCH_INFO进行任何检查，因为它会由您的reducer和this.props.info初始化为[]。

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

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

React / Redux：无法映射状态[object Object]

2 个答案: