reactjs - 是否可以仅在初始化道具时才渲染反应组件?
问题描述
我正在尝试将道具搜索传递给我的 AddressList 组件。
<div className="addresses">
{search && <AddressList onAddressSelect={addressSelectFunction}
addresses={app.addresses}
update={updateChild}
searchRef={searchRef}
search={search}
searchCompleteHandler={searchCompleteHandler}/> }
</div>
问题是,在渲染过程中可能没有初始化道具。
useEffect(()=>{
loadModules(["esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/Search",
"esri/tasks/Locator",
"esri/geometry/Point",
"esri/tasks/RouteTask",
"esri/tasks/support/RouteParameters",
"esri/tasks/support/FeatureSet",
"esri/geometry/geometryEngine",
"esri/geometry/support/webMercatorUtils"])
.then(([Map, MapView, Graphic, GraphicsLayer, Search, Locator, Point, RouteTask, RouteParameters, FeatureSet, geometryEngine, webMercatorUtils]) => {
//...initialize other stuff
search = new Search({
view: view,
container: searchRef.current,
sources: [
{
locator: new Locator({url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"}),
countryCode: "LTU",
name: "Custom Geocoding Service"
}
],
includeDefaultSources: false
//....});
是否可以仅在初始化搜索时使子组件 AddressList 呈现?
解决方案
您需要重新渲染组件。
const [loaded, setLoaded] = useState(false);
useEffect(()=>{
!loaded && loadModules(["esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/Search",
"esri/tasks/Locator",
"esri/geometry/Point",
"esri/tasks/RouteTask",
"esri/tasks/support/RouteParameters",
"esri/tasks/support/FeatureSet",
"esri/geometry/geometryEngine",
"esri/geometry/support/webMercatorUtils"])
.then(([Map, MapView, Graphic, GraphicsLayer, Search, Locator, Point, RouteTask, RouteParameters, FeatureSet, geometryEngine, webMercatorUtils]) => {
//...initialize other stuff
search = new Search({
view: view,
container: searchRef.current,
sources: [
{
locator: new Locator({url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"}),
countryCode: "LTU",
name: "Custom Geocoding Service"
}
],
includeDefaultSources: false
setLoaded(true)
//....});
推荐阅读
- angular - Angular中动态表单下拉控件中的默认零值设置
- rx-java - Hybris Charon Web 服务方法实现(具有 Observable 返回类型)是否开箱即用异步运行?
- angular - 将 mat-select 中的选定字段传递给 TS
- android - 我的应用程序创建的联系人没有编辑选项导出到电话簿中的本机联系人
- java - 如何使用列表进行选择
作为存储库的输入? - wordpress - wordpress rest api 仅通过 url 获取帖子数据
- python - Pandas 基于多列分组的滚动平均值
- ansible - 如何等待变量被定义?
- c++ - 如何每次使用不同的参数多次测试一个方法
- python-3.x - python中的地理空间固定半径集群搜索