ReactJS获取数据不显示

时间:2020-05-06 06:36:11

标签: reactjs redux

我正在尝试使用redux从AWS提取用户列表。在我的本地主机上,一切正常,但是当我将应用程序放在服务器上时,页面上看不到用户,而只能在控制台上看到用户。如果我尝试刷新页面,则会收到404错误。有人可以解释我发生了什么事吗?我在做什么错了?

enter image description here

在我的组件中,我首先这样做

componentDidMount = async () => {
  await this.props.GET_USERS()
}

这是我的行动

export const GET_USERS = () => async dispatch => {
  var params = {
    UserPoolId: 'POOL_ID'
  }

  try {
    const response = await new AWS.CognitoIdentityServiceProvider().listUsers(params).promise()
    dispatch({ type: 'GET_USERS_SUCCESS', response: response.Users })
  } catch(err) {
    dispatch({ type: 'GET_USERS_ERROR', response: err })
  }
}

这是我的减速器

const usersReducer = (state = initState, action) => {
  switch(action.type) {
    case 'GET_USERS_SUCCESS':
      return { ...state, users: action.response }
    case 'GET_USERS_ERROR':
      return { ...state, users: action }
    default:
      return state
  }
}

这是我显示用户的代码

{
  this.props.users ? 
    this.props.users.length ?
      <table>
        <thead>
          <tr>
            <th>Email</th>
            <th>Name</th>
            <th>Date Created</th>
          </tr>
        </thead>
        <tbody>
          {
            this.props.users.map(el => (
              <tr key={ el.Attributes.find(attr => attr.Name === 'sub').Value }>
                <td>{ el.Attributes.find(attr => attr.Name === 'email').Value }</td>
                <td>{ el.Attributes.find(attr => attr.Name === 'given_name').Value }</td>
                <td>{ moment(el.UserCreateDate.toString()).format('MMMM Do YYYY hh:mm a') }</td>
              </tr>
            ))
          }
        </tbody>
      </table>
    :
      <p className="empty">No users found!</p>
  :
    <div className="loader"></div>
}

0 个答案:

没有答案