Question

我具有此功能，可以基于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

Answer 1

我将使api和组件呈现分开。

cluster id

df[df['cluster id'].isna()]

const renderWork = () => {
  return fetch('/api/work/')
    .then(res => res.json())
}

反应动态组件不渲染

1 个答案: