[英]JSX this.state.STATE.map is not a function
Issue: this.state.previousWords.map() is nor recognized as a function问题:this.state.previousWords.map() 也未被识别为函数
I have a hangman app that is trying to render previously seen words onto the page in their own line.我有一个刽子手应用程序,它试图将以前看到的单词按自己的行呈现到页面上。 The issue happens when a new word is added to the array in the state previousWords: [].当一个新词被添加到状态为 previousWords: [] 的数组时,就会出现这个问题。 When the page tries to re-render this it errors stating "TypeError: this.state.previousWords.map is not a function."当页面尝试重新渲染它时,它会出错,指出“TypeError:this.state.previousWords.map 不是函数”。 Below is the code snippet where the error is happening.下面是发生错误的代码片段。
Based off a prior project this is correct syntax (code has been included).基于先前的项目,这是正确的语法(已包含代码)。 I need help understanding why this is not recognized and how to fix it.我需要帮助理解为什么无法识别以及如何解决它。
<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>
Prior app with functioning .map statement:具有正常运行的 .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>
)}
exact error准确的错误
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 ? (
Setting the state for previousWord:设置 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);
});
Console log where the state is being set.正在设置状态的控制台日志。 "test" was added to the initial state for testing purposes.出于测试目的,将“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"]
this.state.previousWords is not an Array that's why you're getting the error. this.state.previousWords 不是数组,这就是您收到错误的原因。 Easiest way to prevent it - check if this.state.previousWords is an Array Array.isArray(this.state.previousWords)
and only then use map
.防止它的最简单方法 - 检查 this.state.previousWords 是否是一个数组Array.isArray(this.state.previousWords)
然后才使用map
。
Array.isArray(this.state.previousWords) && this.state.previousWords.length
It looks like you correctly build out the new array, but then do not use it to update state:看起来您正确构建了新数组,但不要使用它来更新状态:
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,
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.