Question

我正在尝试添加一些启用或禁用按钮的功能，具体取决于用户是否至少有一个“信用”。我想使用逻辑＆amp;＆amp;确定是启用还是禁用按钮。父组件异步提取当前用户，这应该为组件提供对用户模型和用户信用的访问权。

儿童成分：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import SurveyList from './surveys/SurveyList';

class Dashboard extends Component {
    render() {
        console.log(this.props);
        return (
            <div>
                <SurveyList />
                <div className="fixed-action-btn"> 
                    {this.props.auth.credits && 
                      <Link to="/surveys/new" className="btn-floating btn-large red">
                      <i className="material-icons">add</i>
                      </Link>
                    }
                    <button className="btn-floating btn-large disabled red">
                    <i className="material-icons">add</i>
                    </button>
                 </div>
            </div>
        );
    }
};
function mapStateToProps(state) {
    return {
        auth: state.auth
    }
}

export default connect(mapStateToProps)(Dashboard);

父母组成部分：

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Header from './Header';
import { connect } from 'react-redux';
import * as actions from '../actions';
import Landing from './Landing';
import Dashboard from './Dashboard';
import NewList from './lists/NewList';



class App extends Component {
    componentDidMount() {
        this.props.fetchUser();
    }
    render() {
        console.log(this.props);
        return (
            <div className="container">
                <BrowserRouter>
                    <div>
                        <Header />
                        <Route exact path='/' component={Landing} />
                        <Route exact path='/surveys' component={Dashboard} />
                        <Route path='/surveys/new' component={NewList} />
                    </div>
                </BrowserRouter>
            </div>
        );
    }
};

export default connect(null, actions)(App);

ACTION：

export const fetchUser = () => async dispatch => {
    const res = await axios.get('/api/currentUser')
    dispatch({ type: FETCH_USER, payload: res.data});
};

Answer 1

添加其他支票this.props.auth && this.props.auth.credits &&..。

当组件呈现时，prop返回Null

1 个答案: