diff --git a/web/src/Header.js b/web/src/Header.js
index aff4ff97..ea2e4670 100644
--- a/web/src/Header.js
+++ b/web/src/Header.js
@@ -377,7 +377,7 @@ class Header extends React.Component {
                     {this.state.matchNodes.map((val) => {
                       // TODO: maybe weshould add `active` iterm
                       return (
-                        <a className="search-item" href={`/go/${val.id}`}>
+                        <a className="search-item" href={`/go/${val.id}`} key={val.id}>
                           {val.name}&nbsp;&nbsp;/&nbsp;&nbsp;{val.id}
                         </a>
                       );
diff --git a/web/src/admin/AdminFrontConf.js b/web/src/admin/AdminFrontConf.js
index ec71be50..48839031 100644
--- a/web/src/admin/AdminFrontConf.js
+++ b/web/src/admin/AdminFrontConf.js
@@ -193,7 +193,7 @@ class AdminFrontConf extends React.Component {
               <tbody>
                 {this.state.conf.map((item) => {
                   return (
-                    <tr>
+                    <tr key={item.id}>
                       <td width={Setting.PcBrowser ? "120" : "90"} align="right">
                         {this.convert(item.id)}
                       </td>
diff --git a/web/src/admin/AdminNode.js b/web/src/admin/AdminNode.js
index 6084a6f8..b39659ab 100644
--- a/web/src/admin/AdminNode.js
+++ b/web/src/admin/AdminNode.js
@@ -67,7 +67,7 @@ class AdminNode extends React.Component {
     this.getPlanes();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       this.setState(
         {
@@ -356,7 +356,7 @@ class AdminNode extends React.Component {
         {i18next.t("error:Please resolve the following issues before submitting")}
         <ul>
           {problems.map((problem, i) => {
-            return <li>{problem}</li>;
+            return <li key={i}>{problem}</li>;
           })}
         </ul>
       </div>
diff --git a/web/src/admin/AdminPlane.js b/web/src/admin/AdminPlane.js
index a4baad0c..944ecad7 100644
--- a/web/src/admin/AdminPlane.js
+++ b/web/src/admin/AdminPlane.js
@@ -52,7 +52,7 @@ class AdminPlane extends React.Component {
     this.getPlanes();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       this.setState(
         {
@@ -310,7 +310,7 @@ class AdminPlane extends React.Component {
         {i18next.t("error:Please resolve the following issues before submitting")}
         <ul>
           {problems.map((problem, i) => {
-            return <li>{problem}</li>;
+            return <li key={i}>{problem}</li>;
           })}
         </ul>
       </div>
diff --git a/web/src/admin/AdminTab.js b/web/src/admin/AdminTab.js
index 13768e2e..d57e8561 100644
--- a/web/src/admin/AdminTab.js
+++ b/web/src/admin/AdminTab.js
@@ -45,7 +45,7 @@ class AdminTab extends React.Component {
     this.getTabs();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       this.setState(
         {
@@ -246,7 +246,7 @@ class AdminTab extends React.Component {
         {i18next.t("error:Please resolve the following issues before submitting")}
         <ul>
           {problems.map((problem, i) => {
-            return <li>{problem}</li>;
+            return <li key={i}>{problem}</li>;
           })}
         </ul>
       </div>
diff --git a/web/src/admin/AdminTopic.js b/web/src/admin/AdminTopic.js
index abd7ff14..7a49f5e8 100644
--- a/web/src/admin/AdminTopic.js
+++ b/web/src/admin/AdminTopic.js
@@ -82,7 +82,7 @@ class AdminTopic extends React.Component {
     this.getTopic();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       const params = new URLSearchParams(newProps.location.search);
       let page = params.get("p");
diff --git a/web/src/main/AllCreatedTopicsBox.js b/web/src/main/AllCreatedTopicsBox.js
index d0f42b38..86d5ba03 100644
--- a/web/src/main/AllCreatedTopicsBox.js
+++ b/web/src/main/AllCreatedTopicsBox.js
@@ -67,7 +67,7 @@ class AllCreatedTopicsBox extends React.Component {
     this.getMember();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       const params = new URLSearchParams(newProps.location.search);
       let page = params.get("p");
diff --git a/web/src/main/BalanceBox.js b/web/src/main/BalanceBox.js
index 3a83976d..8a905eba 100644
--- a/web/src/main/BalanceBox.js
+++ b/web/src/main/BalanceBox.js
@@ -54,7 +54,7 @@ class BalanceBox extends React.Component {
     this.getRecords();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       const params = new URLSearchParams(newProps.location.search);
       let page = params.get("p");
diff --git a/web/src/main/FavoritesBox.js b/web/src/main/FavoritesBox.js
index 99386f51..601fa028 100644
--- a/web/src/main/FavoritesBox.js
+++ b/web/src/main/FavoritesBox.js
@@ -53,7 +53,7 @@ class FavoritesBox extends React.Component {
     this.getFavoritesInfo();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       const params = new URLSearchParams(newProps.location.search);
       let page = params.get("p");
diff --git a/web/src/main/FilesBox.js b/web/src/main/FilesBox.js
index 2852d067..39baadf7 100644
--- a/web/src/main/FilesBox.js
+++ b/web/src/main/FilesBox.js
@@ -65,7 +65,7 @@ class FilesBox extends React.Component {
     this.getFileNum();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       const params = new URLSearchParams(newProps.location.search);
       let page = params.get("p");
@@ -241,9 +241,9 @@ class FilesBox extends React.Component {
     });
   }
 
-  renderUploadFile(file) {
+  renderUploadFile(file, index) {
     return (
-      <div className="cell">
+      <div className="cell" key={index}>
         <table cellPadding="0" cellSpacing="0" border="0" width="100%">
           <tbody>
             <tr>
@@ -301,7 +301,7 @@ class FilesBox extends React.Component {
             <div className="cell">
               <span className="gray">{i18next.t("file:Uploaded file")}</span>
             </div>
-            {this.state.files?.map((file) => this.renderUploadFile(file))}
+            {this.state.files?.map((file, index) => this.renderUploadFile(file, index))}
           </div>
           <div className="cell">
             <div className="fr" style={{paddingTop: "2px"}}>
@@ -515,7 +515,7 @@ class FilesBox extends React.Component {
     return (
       <div className="problem" onClick={() => this.clearMessage()}>
         {problems.map((problem, i) => {
-          return <li>{problem}</li>;
+          return <li key={i}>{problem}</li>;
         })}
       </div>
     );
diff --git a/web/src/main/LatestReplyBox.js b/web/src/main/LatestReplyBox.js
index 095b087c..9c9f0c57 100644
--- a/web/src/main/LatestReplyBox.js
+++ b/web/src/main/LatestReplyBox.js
@@ -57,7 +57,7 @@ class LatestReplyBox extends React.Component {
     this.getRepliesNum();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       const params = new URLSearchParams(newProps.location.search);
       let page = params.get("p");
diff --git a/web/src/main/MemberBox.js b/web/src/main/MemberBox.js
index c545ac1d..b5b84bc5 100644
--- a/web/src/main/MemberBox.js
+++ b/web/src/main/MemberBox.js
@@ -42,7 +42,7 @@ class MemberBox extends React.Component {
     this.getFavoriteStatus();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       this.setState(
         {
diff --git a/web/src/main/NewBox.js b/web/src/main/NewBox.js
index a964ba35..9c5710f8 100644
--- a/web/src/main/NewBox.js
+++ b/web/src/main/NewBox.js
@@ -228,7 +228,7 @@ class NewBox extends React.Component {
         {i18next.t("error:Please resolve the following issues before creating a new topic")}
         <ul>
           {problems.map((problem, i) => {
-            return <li>{problem}</li>;
+            return <li key={i}>{problem}</li>;
           })}
           {this.state.message !== "" ? <li>{i18next.t(`error:${this.state.message}`)}</li> : null}
         </ul>
diff --git a/web/src/main/NewReplyBox.js b/web/src/main/NewReplyBox.js
index e5db4ef6..bfccec37 100644
--- a/web/src/main/NewReplyBox.js
+++ b/web/src/main/NewReplyBox.js
@@ -119,7 +119,7 @@ class NewReplyBox extends React.Component {
         {i18next.t("reply:Please resolve the following issues before submitting")}
         <ul>
           {problems.map((problem, i) => {
-            return <li>{problem}</li>;
+            return <li key={i}>{problem}</li>;
           })}
         </ul>
       </div>
diff --git a/web/src/main/NodeBox.js b/web/src/main/NodeBox.js
index c5bc9881..0cd5cc5a 100644
--- a/web/src/main/NodeBox.js
+++ b/web/src/main/NodeBox.js
@@ -67,7 +67,7 @@ class NodeBox extends React.Component {
     NodeBackend.addNodeBrowseCount(this.state.nodeId);
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       const params = new URLSearchParams(newProps.location.search);
       let page = params.get("p");
diff --git a/web/src/main/NotificationBox.js b/web/src/main/NotificationBox.js
index d12d8b1b..e60f2b46 100644
--- a/web/src/main/NotificationBox.js
+++ b/web/src/main/NotificationBox.js
@@ -56,7 +56,7 @@ class NotificationBox extends React.Component {
     this.getNotifications();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       const params = new URLSearchParams(newProps.location.search);
       let page = params.get("p");
diff --git a/web/src/main/PageColumn.js b/web/src/main/PageColumn.js
index c17923d3..881ffc76 100644
--- a/web/src/main/PageColumn.js
+++ b/web/src/main/PageColumn.js
@@ -42,7 +42,7 @@ class PageColumn extends React.Component {
     }
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.page !== this.props.page) {
       this.getMaxPage();
     }
diff --git a/web/src/main/RankingPlayerBox.js b/web/src/main/RankingPlayerBox.js
index 73f4e072..e2fa5a25 100644
--- a/web/src/main/RankingPlayerBox.js
+++ b/web/src/main/RankingPlayerBox.js
@@ -70,7 +70,7 @@ class RankingPlayerBox extends React.Component {
           <table cellPadding="10" cellSpacing="0" border="0" width="100%">
             {this.state.playerList
               ? this.state.playerList.map((member, key) => (
-                <tr>
+                <tr key={key}>
                   <td width={Setting.PcBrowser ? "65" : "36"} valign="top" align="center" key={key}>
                     <Avatar username={member.name} avatar={member.avatar} key={key} />
                   </td>
diff --git a/web/src/main/RankingRichBox.js b/web/src/main/RankingRichBox.js
index df63095a..c3b1c737 100644
--- a/web/src/main/RankingRichBox.js
+++ b/web/src/main/RankingRichBox.js
@@ -77,7 +77,7 @@ class RankingRichBox extends React.Component {
           <table cellPadding="10" cellSpacing="0" border="0" width="100%">
             {this.state.richList
               ? this.state.richList.map((member, key) => (
-                <tr>
+                <tr key={key}>
                   <td width={Setting.PcBrowser ? "73" : "36"} valign="top" align="center" key={key}>
                     <Avatar username={member.name} avatar={member.avatar} key={key} />
                   </td>
diff --git a/web/src/main/RecentTopicsBox.js b/web/src/main/RecentTopicsBox.js
index d7a885dc..b120bff1 100644
--- a/web/src/main/RecentTopicsBox.js
+++ b/web/src/main/RecentTopicsBox.js
@@ -51,7 +51,7 @@ class RecentTopicsBox extends React.Component {
     this.getTopics();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       const params = new URLSearchParams(newProps.location.search);
       let page = params.get("p");
diff --git a/web/src/main/ReplyBox.js b/web/src/main/ReplyBox.js
index 44320fa0..a79484cb 100644
--- a/web/src/main/ReplyBox.js
+++ b/web/src/main/ReplyBox.js
@@ -99,7 +99,7 @@ class ReplyBox extends React.Component {
     }
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       const params = new URLSearchParams(newProps.location.search);
       const page = params.get("p");
diff --git a/web/src/main/TopicBox.js b/web/src/main/TopicBox.js
index eb4aaec1..2292a380 100644
--- a/web/src/main/TopicBox.js
+++ b/web/src/main/TopicBox.js
@@ -77,7 +77,7 @@ class TopicBox extends React.Component {
     this.props.getNodeBackground("", "", "", "");
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.location !== this.props.location) {
       if (this.judgeAnchorElement()) {
         return;