Question

我正在使用react和redux，我有一个存储在redux上的对象，上面的截图是redux上的数据状态是映射到组件内的props：

class Users extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.dispatch(fetchUsers());
    }

    render() {
        console.log(this.props.users);
        return (
            <div className="users">
            {React.cloneElement(this.props.children, {
                this.props.users
            })}
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    users: state.users[0]
});

export default connect(mapStateToProps)(Users);

// reducer
import { createReducer } from '../utils/helpers';
users: createReducer(initialData, {
    [FETCH_USERS](state, action) {
        return [action.payload, ...state];
    }
}),

//saga
function* watchFetchUsers() {
    while(true) {
        yield take(FETCH_USERS);
        try {
            const users = yield call(api.fetchUserData);
            yield put({ type:FETCH_USERS, payload: users });    
        } catch (err) {
            yield put({ type:SIGNOUT, status: err });
        }
    }
}

问题是我可以使用console.log(this.props.users)记录此数据但我无法访问console.log(this.props.users.data)或console.log(this.props.users.data[0])内的数据，而这些数据又带有错误数据＆＃39;未定义。任何人都可以告诉我这些问题是什么？

Answer 1

好吧我认为我最初无法引用嵌套数据是因为数据没有呈现到组件中，因为它正在调度动作来异步检索数据，因此返回数据＆＃39;未定义的错误。我通过使用state来检查数据是否准备就绪了：

constructor(props) {
    super(props);
    this.state = {
        data: null
    };
}

componentWillReceiveProps(nextProps) {
    if (nextProps) {
        this.setState({
            data: true
        });
    }
}

render() {
    return (
        <div className="users">
            {this.state.data ? React.cloneElement(this.props.children, {
                users: this.props.users
            }) : ''}
        </div>
    );
}

无法从组件中的redux访问嵌套数据对象

1 个答案: