个人中心
gpt4 book ai didi

React app not displaying updated array of items(Reaction应用程序未显示更新的项目数组)

转载 作者：bug小助手 更新时间：2023-10-27 20:54:09 25 4
gpt4 key购买 nike



I am building an app to make a D&D character sheet. The languages section takes in race and class as props and updates the languages the character speaks accordingly. The problem happens when the user is prompted to select additional languages from a dropdown menu. Logging the array of languages to the console shows that the user selection from the dropdown menu has been pushed to the array of languages, but the display of languages remains the same. For instance, if the character speaks Common and Gnomish and then selects Giant from the dropdown menu the display only shows Common and Gnomish, even though the array contains Giant as well.

我正在建立一个应用程序，使D&D角色表。语言部分将种族和职业作为道具，并相应地更新角色所说的语言。当系统提示用户从下拉菜单中选择其他语言时，就会出现问题。将语言数组记录到控制台显示，下拉菜单中的用户选择已被推入语言数组，但语言的显示保持不变。例如，如果角色说普通和侏儒，然后从下拉菜单中选择巨人，则显示只显示普通和侏儒，即使数组中也包含巨人。


App.js

App.js


import Languages from './Languages'

return (
//Other stuff
<Languages race={race} characterClass={characterClass} background={background} />
//Other stuff
)

Languages.js

Languages.js


import React from 'react'
import Form from 'react-bootstrap/Form'

function Languages(props) {
let languages = ['Common']
//Other stuff that correctly sets and displays languages according to the race and    background props passed in
const handleLanguage = (e) => {
  languages.push(e.target.value)
}
const displayLangMenu = (propRace, propBack) => {
  (if propRace === 'something' || propBack === 'something else'){
    return (
    <div>
    <p>Please select an additional language from the menu</p>
    <Form.Select onChange={handleLanguage}>
      <option value='some language'>Some language</option>
    </Form.Select>
    </div>
    )
  }
}
console.log(languages)
return (
  <div>
    <Form.Group>
      <h4>Languages</h4>
      {displayLangMenu(props.race, props.background)}
      {languages}
    </Form.Group>
  </div>
)
}
export default Languages

I have tried adding a useEffect hook to Languages.js to no avail.

我曾尝试向Languages.js添加一个useEffect挂钩，但无济于事。


useEffect(() => {
  document.title = `Languages: ${languages}`
}, [languages])

return (
  <div>
    <Form.Group>
      <h4>Languages: {languages}</h4>
      {displayLangMenu(props.race, props.background}
    </Form.Group>
  </div>
)

更多回答
优秀答案推荐

I believe the updated array is not shown after new items have been pushed because you defined languages as a normal variable. For a component to re-render, a state must change its value. Therefore, try assigning your languages array as a state using useState and update it's value using the setter function; like so:

我相信在推送新项之后不会显示更新后的数组，因为您将语言定义为普通变量。要重新呈现组件，状态必须更改其值。因此，尝试使用useState将语言数组指定为状态，并使用setter函数更新它的值；如下所示：


[languages, setLanguages] = useState(["Common"])
...
...
const handleLanguage = (e) => {
  setLanguages(old => [...old, e.target.value];
}



更多回答

I tried adding that to Languages.js and got an error saying "Too many rerenders". I tried moving handleLanguage and [languages, setLanguages] = useState(['Common']) to App.js and passing them into Languages.js as props. That got rid of the "too many rerenders" error message, but the app displayed only "Common" as the language, then froze up and became unresponsive. Should I add the useEffect hook back in (I deleted it after it failed to do what I wanted)?

我尝试将其添加到Languages.js中，但得到了一个错误消息：“太多重现器”。我尝试将handleLanguage和[Languages，setLanguages]=useState([‘Common’])移动到App.js，并将它们作为道具传递给Languages.js。这消除了“重现者太多”的错误信息，但这款应用程序只显示了“Common”作为语言，然后冻结并变得没有反应。我是否应该重新添加useEffect挂钩(在它无法执行我想要的操作后将其删除)？

25 4 0
文章推荐： AuthGuard Not Recognizing Session Cookie 'sessionId' in Angular App(AuthGuard无法识别ANGING应用程序中的会话Cookie‘essionID’)
文章推荐： Google Cloud Tasks cannot authenticate to Cloud Run(Google云任务无法向Cloud Run进行身份验证)
文章推荐： Split string with regex based on two conditions(基于两个条件使用正则表达式拆分字符串)
文章推荐： Python Yaml parse inf as float(Python YAML将inf解析为浮点型)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com