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,
},