Question

我是React / Redux的新手，我陷入了一个问题。我从API提取的数据未传递给prop。它始终是一个空对象。我发现可能有些问题我什至不知道，但我不知道该在哪里寻找。

请在下面检查我的代码：

RegisterPage.jsx

import { connect } from 'react-redux';
import { userActions } from '../_actions';

class RegisterPage extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        user: {
            first_name: '',
            last_name: '',
            properties_id: '',
            email: '',
            phone_number: '',
            password: ''
        },
        submitted: false,
        checked: false,
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

componentDidMount() {
    this.props.dispatch(userActions.getAll());
}

handleChange(event) {
    const { name, value } = event.target;
    const { user } = this.state;
    this.setState({
        user: {
            ...user,
            [name]: value
        },
        checked: !this.state.checked
    });
}

handleSubmit(event) {
    event.preventDefault();

    this.setState({ submitted: true });
    const { user } = this.state;
    const { dispatch } = this.props;

    if(this.state.checked) {
        if (user.first_name && user.last_name && user.properties_id && 
            user.email && user.phone_number && user.password) {
            dispatch(userActions.register(user));
        }
    } else {
        alert("Please tick the checkbox to agree to Terms and Conditions");
    }
}

render() {
    const { registering, properties } = this.props;
    const { user, submitted } = this.state;
    return (......) 

}

function mapStateToProps(state) {
  const { registering } = state.registration;
  const { properties } = state;
  return {
    properties,
    registering
  };
}

const connectedRegisterPage = connect(mapStateToProps)(RegisterPage);
export { connectedRegisterPage as RegisterPage };

users.reducers.js

 export function users(state = {}, action) {
  switch (action.type) {
  case userConstants.GETALL_REQUEST:
    return {
      loading: true
    };
  case userConstants.GETALL_SUCCESS:
    return {
      items: action.properties
      //action.users
    };
  case userConstants.GETALL_FAILURE:
    return { 
      error: action.error
    };
  default:
    return state
  }
}

user.actions.js

        export const userActions = {
            login,
            logout,
            register,
            getAll,
            delete: _delete
        };

           function getAll() {
            return dispatch => {
                dispatch(request());

                userService.getAll()
                    .then(
                        properties => dispatch(success(properties)),
                        error => dispatch(failure(error.toString()))
                    );
            };

            function request() { return { type: userConstants.GETALL_REQUEST } }
            function success(properties) { return { type: userConstants.GETALL_SUCCESS, properties } }
            function failure(error) { return { type: userConstants.GETALL_FAILURE, error } }
        }

user.service.js

        // Get All Properties
        function getAll() {
            const requestOptions = {
                method: 'GET'
            };

            return fetch(`${config.apiUrl}/api/properties`, requestOptions).then(handleResponse).then(
                properties => {
                    return properties;
                }
            );
        }

这是控制台的屏幕截图：

显然，属性数组不为空。但是当我要使用属性时，它是空的。我不知道怎么了如果有人可以帮助找出我的代码有什么问题或我错过了什么，那么我们将不胜感激。我只需要解决此问题，我就可以继续前进。预先感谢！

Answer 1

我认为您的状态树可能不包含state.properties，而是包含state.items。除非您在combineReducers()中进行了某些操作以再次改变其形状。

  case userConstants.GETALL_SUCCESS:
    return {
      items: action.properties
      //action.users
    };

这部分可能会导致action.properties而不是state.items存储在state.properties

我建议您使用ReduxDevTools使您的生活更加轻松

React Redux数据未传递给道具

1 个答案: