Javascript 我的React/Redux API无法正确注销显示[[PromiseValue]]

对编码来说非常陌生，但使用React/reduxapi遇到了障碍

我正在关注Bucky Roberts的YouTube&我用一个API替换了他的静态名称对象，然后将其拉入我的reducer中

这会很好地将数据作为数组注销-但是当我尝试将其拉入容器时，我会得到一个

映射不是函数的错误（即使它是数组），或者如果我注销
控制台.log（'props:'，This.props）
我会得到[[PromiseValue]]，并显示数组[10]

但我很确定在我的组件中钻研这一点是不可能的

容器：

class UserList extends Component {

  createListItems() {
    console.log('props: ', this.props);
    return this.props.users.map((user) => {
      return (
        <li
          key={user.id}
          onClick={() => this.props.selectUser(user)}
          >
          {user.name}
          </li>
      )
    })
  }

  render() {
    return (
      <div>
        <ul>
        {this.createListItems()}
        </ul>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    users: state.users
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({selectUser: selectUser}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(UserList);

MyData然后被拉入一个减速机，然后被拉入组合减速机（{}）

，数据应该在容器中如上所述的

MapStateTrops

中显示出来。我做错了什么？我觉得这与解决承诺有关，但我的api实际上正确地记录了所有内容。那么，这与在

createStore

或中向更高的位置传递API数据有关吗

import MyData from './MyData'

export default function() {
  return MyData
}

---

处理API请求的正确方法是将它们放在操作中，并使用一些中间件来处理异步函数。我不确定你的API函数是怎么回事，但无论如何要考虑这个解决方案：

在componentWillMount中，调用获取用户的操作，例如redux thunk中间件：

export function fetchUsers() {
  return async (dispatch) => {
    const { data } = await axios.get('https://jsonplaceholder.typicode.com/users');
    dispatch({
      type: FETCH_USERS,
      payload: data
    });
  }
}

这样，在reducer中就没有承诺了，但是json对象，您将能够映射用户，但是请记住，当您没有用户映射时，会有一瞬间，因此您必须处理此条件以避免错误：

  createListItems() {
    if(this.props.users.length > 0) {
      return this.props.users.map((user) => {
        return (
          <li
            key={user.id}
            onClick={() => this.props.selectUser(user)}
          >
          {user.name}
          </li>
        )
      })
    } else {
      return <div>Loading...</div>;
    }
  }

createListItems（）{
如果（this.props.users.length>0）{
返回此.props.users.map（（用户）=>{
返回(
this.props.selectUser（用户）}
>
{user.name}

)
})
}否则{
返回装载。。。；
}
}

您的数据是一个承诺，而不是一个数组？请发布您的减速机。@Bergi谢谢你，伙计。对我的JS承诺不太满意，所以昨天和今天早上我一直在做一些阅读/练习。谢谢。我今天/明天会看一下Thunks，然后回来给你打分。您使用axios而不提取是有原因的吗？通过昨天的研究，我发现我使用的承诺有点错误。在这种情况下，使用axios没有具体的原因，我只是用来处理axios的请求，但要小心从响应中提取数据。我不确定是否可以拉出{data}对象，而不是将响应分配给新的常量。

  createListItems() {
    if(this.props.users.length > 0) {
      return this.props.users.map((user) => {
        return (
          <li
            key={user.id}
            onClick={() => this.props.selectUser(user)}
          >
          {user.name}
          </li>
        )
      })
    } else {
      return <div>Loading...</div>;
    }
  }