javascript - 即使reactjs收到了数据，为什么我的笔记没有显示/更新？

Question

我正在尝试从 Firebase 数据库加载我的笔记。添加它们一切顺利，检索我的笔记也很好(我可以确认它正在通过控制台工作，并通过访问 console.firebase.google.com 检查我的 firebase 数据库)。

我第一次在我的项目中使用 React-Redux。

我已经尝试过调试并检查控制台记录变量是否显示了正确的数据。一切都很顺利，但是没有任何显示或更新。

App.js:

componentWillMount(){
    const previousNotes = Array(0);
    this.removeAuthListener = app.auth().onAuthStateChanged((user) => {
        app.database().ref().child('notities').on('child_added', snap => {
            if(snap.val().username === this.props.email){
                console.log('DB_ADDED');
                previousNotes.push({
                    id: snap.key,
                    noteContent: snap.val().noteContent,
                    modifiedDate: snap.val().modifiedDate
                });

                console.log("previousNotes", previousNotes);
                store.dispatch({type: "DB_NOTE_ADDED", payload: { notes: previousNotes }});
        }
    });

NotesBody.js:

import React from 'react';
import { connect } from "react-redux";

class NotesBody extends React.Component {
    render(){
        return(
            <ul>
                {
                    this.props.notes.map((note) => {
                        return <li key={note.id}>{note.noteContent}</li>
                    })
                }
            </ul>
        );
    }
}

function mapStateToProps(state){
    console.log("[STATE NOTESBODY]", state);

    return {
    notes: state.notes
    }
}

export default connect(mapStateToProps)(NotesBody);

我的 reducer :

import { createStore } from 'redux';
import { app } from '../config/config';

const initialState = {
    database: app.database().ref().child('notities'),
    notes: []
}

const reducer = (state = initialState, action) => {
    console.log("Reducer running", action.type);

    switch(action.type){
        default:
            break;

        case "DB_NOTE_ADDED":
            console.log("DB_NOTE_ADDED", action.payload.notes);
            state = {
                ...state,
                notes: action.payload.notes
            }
            break;
    }

    return state;
}

const store = createStore(reducer);

store.subscribe(() => {
    console.log("Store updated", store.getState());
});

export default store;

当我的代码收到注释时，它会调用其中包含注释数组的调度函数:

var previousNotes = [
    { id: "1", noteContent: "Hoi" }
];
store.dispatch({type: "DB_NOTE_ADDED", payload: { notes: previousNotes }})

实际结果:

预期结果:

编辑:添加了我的操作代码。现在，如果我实现下面的第一个解决方案，我只加载了 1 个注释。

Answer 1

我建议在 NotesBody.js 组件上使用某种加载状态，直到您确定数据已成功存储为止。也就是说，将 loading: true 添加到您的 redux 状态，并且仅在成功获取注释并更新状态时将其设置为 false。

class NotesBody extends React.Component {
  render() {
    let notes = <p>Loading ...</p>;

    if (!this.props.loading) {
        notes = this.props.notes.map(note => (
            <li key={note.id}>{note.noteContent}</li>
        ));
    }
    return <ul>{notes}</ul>;
  } 
}

function mapStateToProps(state) {
  console.log("[STATE NOTESBODY]", state);

  return {
    notes: state.notes,
    loading: state.loading
  };
}

你的开关应该是这样的:

switch(action.type){
    default:
        break;

    case "DB_NOTE_ADDED":
        console.log("DB_NOTE_ADDED", action.payload.notes);
        state = {
            ...state,
            notes: action.payload.notes,
            loading: false
        }
        break;
}

PS。当您决定从 API 请求新注释时，请不要忘记将加载切换为 true。