0

嘿，我正在尝试制作一个评论组件（看起来有点像 todolist atm）。我有我的组件与 redux 链接，如果我 console.log 我的数组（请参阅评论列表 this.commentaries）我看到它已填充，但评论项目未显示在列表中的屏幕上。 显示屏截图 我不知道我做错了什么有人可以帮助我。这是到目前为止我拥有的三个组件的代码：

评论项目：

import { CommentaryDataService } from "../../service/CommentaryDataService";
import {CommentaryList} from "../commentary-list/commentary-list";

export class CommentaryItem extends LitElement {
   static style = css`
   mwc-icon {
     vertical-align: 30%;
   }
   div:hover{
     background-color: yellow;
   }`

   static properties = {
       id: {
           type: String
       },
       content: {
           type: String,
           reflect: true
       },
       checked: {
           type: Boolean,
           reflect: true
       }
   }

   constructor() {
       super();
       this.commentaryDataService = new CommentaryDataService();
   }

   render() {
       return html`
     <div>
       <mwc-formfield label="${this.content}">
         <mwc-checkbox ?checked=${this.checked} @change=${this.toggle}></mwc-checkbox>
       </mwc-formfield>
       <mwc-icon @click=${this.delete}>delete</mwc-icon>
     </div>
   `;
   }

   toggle(event) {
       this.checked = event.target.checked;
       this.commentaryDataService.updateCommentary(this.id, this.checked);
   }

   delete(){
       this.commentaryDataService.deleteCommentary(this.id)
   }
}
customElements.define('commentary-item', CommentaryItem);

添加评论：

import {Commentary} from "../../model/Commentary";
import {CommentaryDataService} from "../../service/CommentaryDataService";

export class AddCommentary extends LitElement {
       static styles = css`
       :host {
     display: grid;
     grid-template-columns: 50px 2fr auto 50px;
     grid-template-rows: 10px 1fr 10px;
     grid-template-areas:
       ". .     .      ."
       ". field button ."
       ". .     .      .";
     grid-gap: 10px;
   }
   mwc-textfield {
     grid-area: field;
   }
   mwc-button {
     grid-area: button;
     align-self: center;
   }
       `

       constructor() {
           super();
           this.commentaryDataService = new CommentaryDataService();
       }

       render() {
           return html `
           <mwc-textfield
               name="commentary"
               label="Commentary"
               type="text"
<!--                todo voeg de andere dingen naast content toe-->
               content="${this.value}"
               @keyup=${(e) => this.keyUpHandler(e)}
           ></mwc-textfield>
           <mwc-button @click="${this.clickHandler}" raised>Voeg toe</mwc-button>
           `
       }

   keyUpHandler(e) {
       if (e.key === 'Enter') {
           this.addCommentary(e.target.value);
           console.log('entered')
       }
   }

   clickHandler() {
       this.addCommentary(this.shadowRoot.querySelector('mwc-textfield').value)

   }

   addCommentary(content) {
       if(content && content !=='') {
           const newCommentary = new Commentary('', '', '',content, false)
           this.commentaryDataService.addCommentary(newCommentary)

           this.content='';
           this.shadowRoot.querySelector('mwc-textfield').value='';
       }
   }

}

customElements.define('add-commentary', AddCommentary)

评论列表：

import { connect } from 'pwa-helpers';
import {store} from '../../../redux/AppService'
import { CommentaryDataService } from "../../service/CommentaryDataService";

export class CommentaryList extends connect(store) (LitElement) {

   static styles = css`
   :host {
     display: grid;
     grid-template-rows: auto 1fr;
     grid-template-columns: 1fr;
     grid-template-areas: 
       "header"
       "list";
   }
   h1 {
     justify-self: center;
     grid-area: header;
   }
   div {
     grid-area: list;
     width: 100%;
     justify-self: start;
     align-self: start;
   }`

   static get properties() {
       return {
           commentaries: { type: Array }
       }
   }

   constructor() {
       super();
       this.commentaryDataService = new CommentaryDataService();
       this.commentaryDataService.fetchCommentaryData();
       this.commentaries = []
   }

   stateChanged(state) {
       this.commentaries = state.commentaryReducer.commentaries;
   }

   render() {
       console.log( this.commentaries.map((commentary) => {console.log(commentary.content)}))
       return html`
   <h1>Opmerkingen</h1>
   <div>
       ${
           this.commentaries.map((commentary) => {
           return html`<commentary-item id="${commentary.id}" content="${commentary.content}" ?checked=${commentary.checked}></commentary-item>`
               })
       }
   </div>
 `;
   }
}


customElements.define('commentary-list', CommentaryList);

我的 redux 文件看起来像这样（我认为它们可以工作，因为数组已满）： CommentaryDataservice：

import utils from "../../utils";
import {addCommentary, deleteCommentary, setCommentary, updateCommentary} from "./actions/CommentaryActions";
import {Commentary} from "../model/Commentary";

export class CommentaryDataService {
    constructor() {
    }

    fetchCommentaryData() {
        utils.query(
            `query{
              comments{
                id
                name
                content
                checked
                transition {
                  originalSubject {
                    code
                  }
                }
              }
            }`
        ).then(json => this._parseAllCommentaryJsonAndStore(json));
    }

    addCommentary(commentary) {
        store.dispatch(addCommentary(commentary))
    }

    updateCommentary(commentaryId, checked) {
        store.dispatch(updateCommentary(commentaryId, checked))
    }

    deleteCommentary(commentaryId) {
        store.dispatch(deleteCommentary(commentaryId))
    }

    _parseAllCommentaryJsonAndStore(json) {
        let commentaryDataList = [];
        json.data.comments.forEach(commentary => commentaryDataList.push(
            new Commentary(commentary.id, commentary.name, commentary.transition.originalSubject.code, commentary.content, commentary.checked)));
        store.dispatch(setCommentary(commentaryDataList));
    }
}

评论减速机：


const initialState = {
    commentaries: []
}

export const CommentaryReducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_COMMENTARY:
            return {
                commentaries: action.commentary
            }
        case ADD_COMMENTARY:
            return {
                ...state,
                commentaries: [...state.commentaries, action.commentary]
            }
        case UPDATE_COMMENTARY:
            return {
                ...state,
                commentaries: state.commentaries.map(
                    (commentary) => {
                        //todo voeg id aan database toe
                        if(commentary.id === action.commentaryId){
                            commentary.checked = action.checked
                        }
                        return commentary
                    }
                )
            }
        case DELETE_COMMENTARY:
            return {
                ...state,
                commentaries: state.commentaries.filter(
                    (commentary) => commentary.id !== action.commentaryId
                )
            }
        default:
            return state;
    }
}

评论动作：

export const SET_COMMENTARY = 'SET_COMMENTARY';
export const ADD_COMMENTARY = 'ADD_COMMENTARY';
export const UPDATE_COMMENTARY = 'UPDATE_COMMENTARY';
export const DELETE_COMMENTARY = 'DELETE_COMMENTARY';

export const setCommentary = (commentary) => {
    return {
        type: SET_COMMENTARY,
        commentary: commentary
    }
}

export const addCommentary = (commentary) => {
    return{
        type: ADD_COMMENTARY,
        commentary: commentary
    }
}

export const updateCommentary = (id, checked) => {
    return {
        type: UPDATE_COMMENTARY,
        commentaryId: id,
        checked: checked
    }
}

export const deleteCommentary = (id) => {
    return {
        type: DELETE_COMMENTARY,
        commentaryId: id
    }
}

评论：

    constructor(id, name, code, content, checked) {
        this.id = id;
        this.name = name;
        this.code = code;
        this.content = content;
        this.checked = checked;
    }
}

应用服务：

import { SubjectReducer } from '../search/service/reducers/SubjectReducer'
import { TestReducer } from '../search/service/reducers/TestReducer'
import { TransitionReducer } from '../search/service/reducers/TransitionReducer'
import {CommentaryReducer} from "../commentary/service/reducers/CommentaryReducer";
import {TransitionProfileReducer} from "../search/service/reducers/TransitionProfileReducer";

const rootReducer = combineReducers(
    {
        subjectReducer: SubjectReducer,
        testReducer: TestReducer,
        transitionReducer: TransitionReducer,
        commentaryReducer: CommentaryReducer,
        transitionProfileReducer: TransitionProfileReducer
    }
)

export const store = createStore(
    rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

希望有人知道答案。

4

0 回答 0