[英]using map won't render any JSX content react
I have the an issue where I am trying to generate dynamic checkbox elements from a list of data and there are no checkboxes appearing on the screen, yet there are no errors visible in the console.我有一个问题,我试图从数据列表中生成动态复选框元素,但屏幕上没有出现任何复选框,但控制台中没有可见的错误。 I am following the pattern I used in a different component to render jsx so I must have a typo but I'm stumped.我正在遵循我在不同组件中使用的模式来呈现 jsx,所以我必须有一个错字,但我很难过。
Main component SearchPage.js:主要组件 SearchPage.js:
const renderSettingsView = (data) => {
if (settingsViewVisible) {
return (
<SettingsView data={data} />
)
} else {
return null;
}
}
const toggleSettingsView = () => {
setSettingsViewVisible(!settingsViewVisible);
}
const toggleMainInfo = (e) => {
// setShowMainInfo(!showMainInfo);
setShowMainInfo(e.target.checked, () => {
alert(showMainInfo)
})
}
const SETTINGS_DATA = [
{
label: 'Main info',
id: 'main_info',
callback: toggleMainInfo
}
]
return (
<div className="ui container" style={{marginTop: '10px'}}>
<SearchBar term={term} onTermUpdate={onTermUpdate} />
{renderRecentSearches()}
<br/><br/>
<button onClick={toggleSettingsView}>Settings</button>
{renderSettingsView(SETTINGS_DATA)}
<div className="ui segment">
{renderMainContent()}
</div>
</div>
)
both attempts including the commented out one do not show any checkboxes on screen SettingsView.js:包括注释掉的两种尝试都没有在屏幕 SettingsView.js 上显示任何复选框:
import React from 'react';
import SettingsCheckbox from './SettingsCheckbox';
const SettingsView = ({data}) => {
// const renderCheckboxes = () => {
// return data.map((checkbox_info) => {
// <SettingsCheckbox id="main_info" label="Main info" callback={checkbox_info.callback}/>
// });
// }
const checkboxes = data.map((checkbox_info) => {
<SettingsCheckbox id="main_info" label="Main info" callback={checkbox_info.callback}/>
});
return (
<div className="ui segment">
settings
{checkboxes}
</div>
);
}
export default SettingsView;
SettingsCheckbox.js: SettingsCheckbox.js:
import React from 'react';
const SettingsCheckbox = ({id, label, callback}) => {
return (
<div style={{width: '200px'}}>
<input
type="checkbox"
id={id}
name={id}
value={id}
onChange={callback()} />
<label for="main_info">{label}</label><br/>
</div>
);
}
export default SettingsCheckbox;
How do I map over the data list of objects and render checkboxes based on the data?如何在对象的数据列表上 map 并根据数据呈现复选框?
I have tried your code snippet of SettingsView.js and there's a little problem I found.我已经尝试了您的 SettingsView.js 代码片段,但发现了一个小问题。 You need to do an implicit return like below.您需要执行如下所示的隐式返回。
Try using this code,尝试使用此代码,
const checkboxes = data.map((checkbox_info) => (
<SettingsCheckbox id="main_info" label="Main info"
callback= {checkbox_info.callback}/>
));
return (
<div className="ui segment">
settings
{checkboxes}
</div>
);
Notice that I've changed the data.map((checkbox_info) => {<SettingsCheckbox />})
to data.map((checkbox_info) => (<SettingsCheckbox />))
and using ()
instead of {}
请注意,我已将data.map((checkbox_info) => {<SettingsCheckbox />})
更改为data.map((checkbox_info) => (<SettingsCheckbox />))
并使用()
而不是{}
But if you prefer the explicit way, try using the return statement like bellow.但是,如果您更喜欢显式方式,请尝试使用如下的 return 语句。
const checkboxes = data.map((checkbox_info) => {
return (
<SettingsCheckbox id="main_info" label="Main info"
callback= {checkbox_info.callback}/>
)
});
return (
<div className="ui segment">
settings
{checkboxes}
</div>
);
Both way works just fine...两种方式都很好用...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.