Question

更新道具时，使用Ant Design Framework的React组件不会重新渲染。数据显示在控制台中已更新，但在List标记中未更新。这是我的代码的一部分。

   render() {
   const props = this.props;
   data=[
   {
       'title':'name1',
       'content':props.data.content1
   },
   {
       'title':'name2',
       'content':props.data.content2
   },
   ]
   console.log("Data..",data);
   return (
    <Page {...props}>
        <Helmet title="Organizations" />
        <div className="card">
           <div className="card-header">
             <div className="utils__title">
                <strong>Organization Details</strong>
              </div>
            </div>
      <div className="card-body" span={20}>
        <div className="organization">
          <div className="organization_details">
            <List
              grid={{ gutter: 16, column: 1 }}
              dataSource={data}
              size="small"
              renderItem={item => (
                <List.Item>
                  <Card className="list1" title={item.title} bordered={false}>
                    {item.content}
                  </Card>
                </List.Item>
              )}
            />
           </div>
         </div>
       </div>
      </div>
      </Page>
    )

}

Answer 1

我认为数据不是您要使用的 data 变量。

使用const可以解决问题！

// Destructure your props like this
const { props } = this;

const data=[
   {
       'title':'name1',
       'content':props.data.content1
   },
   {
       'title':'name2',
       'content':props.data.content2
   },
]

道具更改后，React组件未重新渲染

1 个答案: