我具有此功能可基于API生成动态组件
const renderWork = () =>{
let DOM = []
fetch('/api/work/')
.then(res => res.json())
.then(res => {
for (let i = 0; i < res.length; i++){
DOM.push(
<Item id={res[i]._id}>
<Item.Image src={res[i].imageURL} />
<Item.Content>
<Item.Header as='a'>Watchmen</Item.Header>
<Item.Meta>
<span className='cinema'>{res[i].createdDate}</span>
</Item.Meta>
<Item.Description>{res[i].description}</Item.Description>
<Item.Extra>
<Label>Hi</Label>
<Button primary floated='right'>
Buy tickets
<Icon name='right chevron' />
</Button>
</Item.Extra>
</Item.Content>
</Item>
)
}
})
return DOM
}
我正在尝试通过调用主要组件中的renderWork()函数来渲染这些项目
主要Componenet:
function Work(){
return (
<div>
<Nav/>
<div style={css.body}>
<Item.Group divided>
{renderWork()}
</Item.Group>
</div>
</div>
)
}
我不确定为什么它不显示在我尝试过的页面上:
为DOM设置状态并更改它。
使用useEffect钩子来管理状态和/或DOM
仍然,项目不会渲染
我正在为我的组件使用react.semantic-UI
我将使api和组件的呈现保持分离。
const renderWork = () => {
return fetch('/api/work/')
.then(res => res.json())
}
function WorkItem({item}) {
return <Item id={item._id}>
<Item.Image src={item.imageURL} />
<Item.Content>
<Item.Header as='a'>Watchmen</Item.Header>
<Item.Meta>
<span className='cinema'>{item.createdDate}</span>
</Item.Meta>
<Item.Description>{item.description}</Item.Description>
<Item.Extra>
<Label>Hi</Label>
<Button primary floated='right'>
Buy tickets
<Icon name='right chevron' />
</Button>
</Item.Extra>
</Item.Content>
</Item>
}
function Work() {
const [items, setItems] = useState([])
useEffect(() => {
renderWork()
.then(data => {
setItems(data)
})
}, [])
return (
<div>
<Nav/>
<div style={css.body}>
<Item.Group divided>
{items.map(item => <WorkItem item={item}/>}
</Item.Group>
</div>
</div>
)
}