根据对象值更改重新渲染组件

Question

我想知道如何在对象的值更改时使组件更新。这是我的代码：

import React from "react";


const OccupationZone = ({ polygon }) => {
return (
 <div>
   <h1>Taux d'occupation</h1>
   {polygon.map(poly => {
     if (poly.type == "occupation") {
       console.log(poly);
       return (
         <div key={poly._leaflet_id}>
         <span>
           {poly.label} : {poly.occupationPercentage}
         </span>
       </div>
       );
     }
   })}
 </div>
);
};

export default OccupationZone;

我正在接受多边形作为道具。这是一个对象数组。当我添加一个新的多边形时，返回do是job并将新的多边形添加到带有地图的列表中，他的名字poly.label显示正确。

在另一个组件中，我更改了占领百分比的值，但是当它更改时，我可以在console.log（poly）中看到新值，但是poly.occupationPercentage的跨度不会更新并保持默认值值。

Before occupationPercentage change

After occupationPercentage change