25
4
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
这里我试图在 FlatList 中显示一个名为“posts”的数组。 render() { console.log(this.props.posts); return (
这是我的代码: {{day(list)}} {{list.weather[0].description}}
我是 Mahout 的新手，并且仍在使用它。 我的问题是，将 Item-Item 和 User-Item 结合起来是否合适？ 我的用例是，一个社交网络应用会尝试根据用户历史数据(优先级较高)为当前用户
下午好， 我按数据库搜索以测试特定类测试，当我放置一个新项目时，如果列表包含该项目。 @Test public void insertAndDeleteTask() throws Interrupte
我有一个关于 ionic 框架的问题，我希望有人能帮助我...我有一个带有“ion-item-right”的 ionic 列表。这一切都可以，按钮在右边。现在我需要其他三个居中的图标，这样我就有了:文
我经常遇到类似下面的代码: if ( items != null) { foreach(T item in items) { //... } } 基本上，if 条件确
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
这个问题已经有答案了: Type mismatch: cannot convert from Item to Item (1 个回答) 已关闭 7 年前。 我很困惑。我无法将外部类的实例变量 Node
我目前正在使用 MUI Grid(但我对替代解决方案持开放态度)并且我想要并排放置两个组件:最右边的组件占 400px宽度和左侧组件占据其余部分。 || || || 当页面宽度缩小时: | | ||
我最近问过a question about LocalStorage 。使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
public class Document extends Model { ... @ManyToMany public Set accessors; ... } 我想选择访问者包含某个用户的所有文档
我正在使用 selenium webdriver 为单页 Web 应用程序开发一个 Java 框架，使用以下模式:PageObject、SlowLoadableComponent(责任链)、PageF
最近在学习C，在网上发现了一个问题。问题是: What is the problem with this function in terms of memory allocation? What is
我有这个代码 ( -1 ? true : false} /> {genre.item.name}
在ASP.Net中使用DataGrid时真的没有快捷方法吗 (e.Item.ItemType==ListItemType.Item || e.Item.ItemType==ListItemType.A
我正在使用工作流程根据数据和一组要求将大量 pdf 从一个位置复制到其他大坝位置。我正在使用以下代码 Assets damAsset = manager.createAsset(path, is, m
我是 PowerShell 的新手。 我正在尝试自动将 dll 组件从源服务器上的文件夹部署到目标服务器上的多个文件夹。这看起来应该很简单:将组件从源服务器上的源(部署)文件夹复制到目标服务器上的文件
我的代码: for column_name, column_data in summary_words.iteritems(): if column_name != "summary" and
我的代码: for column_name, column_data in summary_words.iteritems(): if column_name != "summary" and
我是一名优秀的程序员,十分优秀！