오류노트

회의록 내용을 불러오는도중 가끔 회의록 내용이 불러와 지지않고 하얀화면이 떴다.

 

console을 확인해보니 

Uncaught TypeError: nameList.filter is not a function 라는 에러가 떴다.

 

<div className="dialogue"/*채팅 대화 구현*/>
<Element className='chat-wrapper' id="chat">
    <div className='display-container'>
        <ul className='chatting-list'>
            {dialogue.map(dialogue =>
                <li className={dialogue.speaker_seq === minutes.speaker_seq ? "chat-mine" : "chat-other"} key={dialogue.vr_id}>
                    {nameList.filter(data => data.speaker_seq===dialogue.speaker_seq).map(data =>
                    <span className='chat-profile' key={data.speaker_seq} onContextMenu={(e)=>{openCtxtProf(e); setSpkSeq(dialogue.speaker_seq)}}>
                        <div id="prof-menu">
                            <ul>
                                <li className="dropdown-item" onClick={setSpeaker}>'나'로 지정하기</li>
                            </ul>
                        </div>
                        <span className='chat-user' onClick={() => {setNameModal(dialogue.vr_id); setSpkSeq(dialogue.speaker_seq);}}>
                            <Highlighter
                                highlightClassName="YourHighlightClass"
                                searchWords={[search]}
                                autoEscape={true}
                                textToHighlight={data.speaker_name ? data.speaker_name : "참가자"+data.speaker_seq}
                            />
                        </span>
                        <Modal show={nameModal===dialogue.vr_id} onHide={() => setNameModal()}>
                            <Modal.Header closeButton>
                                <Modal.Title>참가자 이름 변경</Modal.Title>
                            </Modal.Header>
                            <Modal.Body>
                                <h6>참가자 이름</h6>
                                <input type="text" className="form-control" id="name" value={name} onChange={(e) => setName(e.target.value)} />
                            </Modal.Body>
                            <Modal.Footer>
                                <button type="button" id="btn-color" className="btn-override modal-btn" onClick={(e)=>changeName(e,spkSeq)} >
                                    변경
                                </button>
                            </Modal.Footer>
                        </Modal>
                                {/* <img src={chatProfile} alt='any' /> */}
                                <span style={{fontSize: '2rem'}}>😄</span>
                    </span>
                    )}
          
                    <Element name={dialogue.vr_start.split(".")[0]} className='chat-msg' onClick={()=>moveAudio(dialogue.vr_start.split(".")[0])}
                          onContextMenu={(e)=>{openCtxt(e); setStart(dialogue.vr_start.split(".")[0]); setEnd(dialogue.vr_end.split(".")[0]); setDial(dialogue.vr_text); setVrSeq(dialogue.vr_seq)}}>
                        <Highlighter
                        highlightClassName="YourHighlightClass"
                        searchWords={[search]}
                        autoEscape={true}
                        textToHighlight={dialogue.vr_text}
                    />
                    </Element>
                    <span className='chat-time'><Highlighter
                        highlightClassName="YourHighlightClass"
                        searchWords={[search]}
                        autoEscape={true}
                        textToHighlight={changeTime(dialogue.vr_start.split(".")[0])}
                    /></span>
                    <div id="chat-menu">
                        <ul>
                            <li className="dropdown-item" onClick={()=>setShowBm(dialogue.vr_id)}>북마크</li>
                            <NewBm showBm={showBm===dialogue.vr_id} setShowBm ={setShowBm} mn_id={mnId} start={start} end={end}/>
                            <li className="dropdown-item" onClick={() => setDialModal(dialogue.vr_id)}>대화 수정</li>
                            <Modal show={dialModal===dialogue.vr_id} onHide={() => setDialModal()}>
                            <Modal.Header closeButton>
                                <Modal.Title>대화 수정</Modal.Title>
                            </Modal.Header>
                            <Modal.Body>
                                <h6>변경할 내용을 입력해주세요</h6>
                                <textarea className="chat-txtarea" placeholder="" cols="60" rows="10" value={dial ? dial : ""} onChange={(e)=>setDial(e.target.value)}></textarea>
                            </Modal.Body>
                            <Modal.Footer>
                                <button type="button" id="btn-color" className="btn-override modal-btn" onClick={(e)=>changeDial(e, vrSeq)} >
                                    저장
                                </button>
                            </Modal.Footer>
                        </Modal>
                        </ul>
                    </div>
                </li>
            )}
        </ul>                     
    </div>
</Element>
</div>

현재 코드에서는 이상할점이 없다고 판단해서 구글링을 했더니

 

 

https://bobbyhadz.com/blog/javascript-typeerror-filter-is-not-a-function

Solve - filter is not a function Error in JavaScript | bobbyhadz

 이 사이트에서 Array로 설정하지 않은상태에서 filter를 사용하면 생기는 오류라는 것을 알게 되었다.

 

 const [nameList, setNameList] = useState("");

nameList가 배열이 아닌 ""로 설정되서 일어난 에러였던 것이다.

 

const [nameList, setNameList] = useState([]);

배열로 바꿔주니 오류는 발생하지 않았다.