Question

相当新的编码，但使用React / Redux API遇到障碍。

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

这会将数据记录为数组 - 但是当我尝试将中的拉到我的Container时，我得到map is not a function错误（即使它是一个数组）或者如果我退出console.log('props: ', this.props)我得到[[PromiseValue]]并显示数组[10]。

但我非常确定在我的组件中进行钻探是不行的。

CONTAINER：

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);

API：

const MyData = fetch('https://jsonplaceholder.typicode.com/users') .then(function(data1) { return data1.json() }).then(function(data2) { return data2 }).then(function(data3) { console.log('API RESPONSE: ', data3) return data3 }) export default MyData;

然后将MyData拉入reducer，然后转入combineReducers({})，数据应显示在容器中的mapStateToProps中。我究竟做错了什么？我觉得这与解决Promise有关，但我的api实际上正确记录了所有内容。因此，在createStore或？：
中将API数据传递到更高的位置是有意义的
import MyData from './MyData' export default function() { return MyData }

Answer 1

处理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>;
    }
  }

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

1 个答案: