Question

我有此代码：

export default class MainStudentPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {user: {nickname: '', friends: {accepted: [], invites: [], all: []}}};
    }

    componentWillMount() {
        const {uid} = firebase.auth().currentUser;
        firebase.database().ref('Users').child(uid).on('value', (r, e) => {
            if (e) {
                console.log(e);
                return null;
            }
            const user = r.val();
            this.setState({user: user});
        });
    }

    render() {
        const {user} = this.state;
        return (
                <LevelSelectComponent user={user}/>
            </div>
        );
    }
}

这是孩子：

export default class LevelSelectComponent extends React.Component {
    returnSelect = (user) => {
        const lvls = [{
            db: 'Podstawówka',
            text: 'PODSTAWOWA'
        }, {
            db: 'Gimnazjum',
            text: 'GIMNAZJALNA'
        }, {
            db: 'Liceum',
            text: 'ŚREDNIA'
        }];
        let options = [];
        if (!user.level) {
            options.push(<option selected={true} value={null}>WYBIERZ POZIOM</option>)
        }
        options = options.concat(lvls.map((lvl, i) => {
            return (
                <option key={i} value={lvl.db}>{`SZKOŁA ${lvl.text}`}</option>
            )
        }));
        return (
            <select defaultValue={user.level}>
                {options.map(opt => opt)}
            </select>
        )
    };
    render() {
        const {user} = this.props;
        return (
            this.returnSelect(user)
        );
    }
}

所以我想要刷新默认的选定值以匹配数据库中的值。我正在监听Firebase实时数据库进行更改。每次刷新页面时，defaultValue都会按预期更改，但这不是实时的。它甚至记录新值，但不会重新呈现它。我想念什么？

Answer 1

好的。我要做的就是将defaultValue更改为value

Answer 2

componentWillMount()这不是您使用AJAX请求的方法而是用户componentDidMount()。

进一步：

componentWillMount()仅在组件的第一个render()之前被调用一次，因此不会触发它的重新渲染，您应该在{{1 }}。

Firebase更改时组件未刷新

2 个答案: