Reactjs 为什么我的React本机组件在状态更新时不重新呈现？

这几天来，我一直在努力解决这个React原生组件。你应该知道，React Native对我来说有点陌生所以。。。很抱歉，如果解决方案对您来说是显而易见的

我使用的是react本地地图，地图上有几个标记。它们中的每一个都有一些存储在“我的状态”中的数据，我希望调用在按下时显示该状态的一部分。 以下是我的国家：

const [markersDetails, setMarkersDetails] = useState([]);
const [activeMarker, setActiveMarker] = useState({});

My activeMarker由以下函数更新：

const markerSearch = (markerId) => {
  let stockMarker = markersDetails.find((singleMarker) => {
    return Number(singleMarker.idMarker) === markerId;
  });
  console.log("Stock ", stockMarker);
  setActiveMarker(stockMarker);
  console.log("State ", activeMarker);
};

这个函数在我的return中被调用，使用任何标记的onPress：

<Marker
  key={Number(marker.index)}
  coordinate={{
    latitude: Number(marker.latitude),
    longitude: Number(marker.longitude),
  }}
  pinColor="blue"
  onPress={() => {
    markerSearch(Number(marker.index));
  }}
>
  {activeMarker !== {} && activeMarker.markerName && (
    <Callout>
      <View>
        <Text>{activeMarker.markerName}</Text>
      </View>
    </Callout>
  )}
</Marker>

{
标记搜索（编号（标记索引））；
}}
>
{activeMarker！={}&&activeMarker.markerName&&(
{activeMarker.markerName}
)}

但每当我按下一个标记时，调用会立即打开，而我的状态尚未更新。因此，详图索引中的文本引用上一个标记或为空（如果它是我按下的第一个标记）。 我已经使用console.log进行了检查，我的状态已经很清楚地更新了，但这需要更多的时间。我不知道为什么我的标注在更新状态时没有重新呈现。

---

我已经尝试了很多方法来实现这一点，但我想不出这一点…

尝试这样做：

可以将截面提取到新构件

然后在这里面使用useffect钩子

导出默认函数callout组件（{activeMarker}）{
const[markerName，setMarkerName]=useState（“”）
useffect（（）=>{
setMarkerName（activeMarker？.markerName）
}，[activeMarker？.markerName]）
如果（！！markerName）返回null
返回(
{markerName}
)
}

并在主视图中使用此新组件

在onPress中，您指的是marker.index，它看起来像是markersDetails数组中的索引，而在MarkersSearch函数中，您使用find时使用数组中singleMarker元素的值，我认为您可能需要将其更改为：let stockMarker=markersDetails.find（（singleMarker，singleMarkerIndex）=>{return singleMarkerIndex===markerId；}）；感谢您的输入@elirand5，但是这个解决方案在本例中不起作用，“索引”这里不是数组中的位置，而是数据库中的位置，因此它们不一样。无论如何，问题仍然是状态更新速度和组件渲染速度之间的差异和/或状态更新后缺少重新渲染。感谢Juan的输入。不幸的是，我已经将调用提取到另一个组件e今天早些时候，问题依然存在。

export default function CalloutComponent({activeMarker}) {
  const [markerName, setMarkerName] = useState('')
  
  useEffect(() => {
    setMarkerName(activeMarker?.markerName)
  }, [activeMarker?.markerName])

  if(!!markerName) return null

  return (
    <Callout>
      <View>
        <Text>{markerName}</Text>
      </View>
    </Callout>
  )
}

<Marker
  ...
>
  <CalloutComponent activeMarker={activeMarker}/>
</Marker>