JSX this.state.STATE.map 不是函數

Question

問題：this.state.previousWords.map() 也未被識別為函數

我有一個劊子手應用程序，它試圖將以前看到的單詞按自己的行呈現到頁面上。 當一個新詞被添加到狀態為 previousWords: [] 的數組時，就會出現這個問題。 當頁面嘗試重新渲染它時，它會出錯，指出“TypeError：this.state.previousWords.map 不是函數”。 下面是發生錯誤的代碼片段。

基於先前的項目，這是正確的語法（已包含代碼）。 我需要幫助理解為什么無法識別以及如何解決它。

<div className="col-3">
                        <h3>Previous words:</h3>
                        <br></br>

                        {this.state.previousWords.length ? (
                            
                            <div>
                                {this.state.previousWords.map( (value, index) => (

                                    <div 
                                    key={index}
                                    className="row">

                                        {value}

                                    </div>

                                ))}
                            </div>

                        ):(<></>)}
                    </div>

具有正常運行的 .map 語句的先前應用程序：

{this.state.events.length ? (
                                        
                                        <Dropdown.Menu>
                                            {this.state.events.map(events => (
                                                <Dropdown.Item
                                                key={events.event_id}
                                                /* TODO: onClick() */
                                                >
                                                    {events.title}
                                                </Dropdown.Item>
                                                ))}
                                        </Dropdown.Menu>

                                    ) : (

                                        <Dropdown.Menu>
                                            <Dropdown.Item>No Events Available</Dropdown.Item>
                                        </Dropdown.Menu>

                                    )}

准確的錯誤

 325 | 
  326 | <div className="col-3">
  327 |     <h3>Previous words:</h3>
> 328 |     <br></br>
      | ^  329 |     <>{console.log(this.state.previousWords)}</>
  330 | 
  331 |     { this.state.previousWords.length ? (

設置 previousWord 的狀態：

 if( this.loss() ) {

                                let previousWords = [...this.state.previousWords];
                                previousWords.push(this.state.apiWord);
                                console.log("Loss: before state updated: this.state.previousWords: ", this.state.previousWords);
                                console.log("Loss: before state updated: let previousWords: ", previousWords);

                                
                                this.setState({
                                    previousWords: this.state.apiWord,
                                    pageLock: true,
                                    losses: this.state.losses + 1,
                                }, () => {
                                    console.log("Loss: after setState: this.state.previousWords: ", this.state.previousWords);

                                    this.resetGame();
                                    setTimeout(() => {

                                        // this.setWord();
                                    }, 5000);
                                });

正在設置狀態的控制台日志。 出於測試目的，將“test”添加到初始狀態。

after API call: this.state.previousWords:  ["test"]
App.js:209 Loss: before state updated: this.state.previousWords:  ["test"]
App.js:210 Loss: before state updated: let previousWords:  (2) ["test", "unintermitting"]

Answer 1

this.state.previousWords 不是數組，這就是您收到錯誤的原因。 防止它的最簡單方法 - 檢查 this.state.previousWords 是否是一個數組Array.isArray(this.state.previousWords)然后才使用map 。

Array.isArray(this.state.previousWords) && this.state.previousWords.length

Answer 2

看起來您正確構建了新數組，但不要使用它來更新狀態：

let previousWords = [...this.state.previousWords];
previousWords.push(this.state.apiWord);

this.setState({
  previousWords: this.state.apiWord, // Should be previousWords: previousWords
  pageLock: true,
  losses: this.state.losses + 1,
},