РЕДАКТИРОВАТЬ:
Вот рабочий jsComplete (используйте хром), где я назначаю JSON состоянию вместо создания api вызов. Я пытаюсь сделать то же самое с вызовом api.
Как присвоить значение свойству состояния locoData
перед запуском метода render()
?
locoData
никогда не назначается, а console.log(resp.data);
выполняется после метода рендеринга. Я новичок в реакции и просто знаком с новыми функциями JavaScript, такими как обещания, и это меня действительно сбивает с толку. Я выполняю этот код в jsComplete
Если я назначу JSON состоянию вместо попытки использовать метод axios.get
, он будет работать нормально. Ответ JSON находится внизу.
Я удалил свой ключ карты Bing.
const LocationData = (props) => (
<div>
{props.location => <Location key={location.traceId} {...location}/>}
</div>
)
class Location extends React.Component {
state = { locoData: {} },
const a = axios.get("https://dev.virtualearth.net/REST/v1/Locations?CountryRegion=US&adminDistrict=WA&locality=Somewhere&postalCode=98001&addressLine=100%20Main%20St.&key=bingMapKey").then(resp => {
console.log(resp.data);
this.setState({ locoData: resp.data });
});
render() {
resources = this.state.locoData.resourceSets[0].resources.map(function(resource){
return <div className="resource" key={resource.name} {...resource}></div>;
});
return (
<div>
<img src={location.brandLogoUri} />
<div>
<div>{resources.name}</div>
<div>{resources[0].props.point.coordinates[0]} {resources[0].props.point.coordinates[1]}</div>
</div>
</div>
);
}
}
class App extends React.Component {
state = {
location: [],
};
displayLocation = (locationData) => {
this.setState(prevState => ({
location: [...prevState.location, locationData],
}));
};
render() {
return (
<div>
<div>{this.props.title}</div>
<Location LocationData={this.state.location} />
</div>
);
}
}
ReactDOM.render(
<App title="Simple Weather App" />,
mountNode,
);
{"authenticationResultCode":"ValidCredentials","brandLogoUri":"http:\/\/dev.virtualearth.net\/Branding\/logo_powered_by.png","copyright":"Copyright © 2019 Microsoft and its suppliers. All rights reserved. This API cannot be accessed and the content and any results may not be used, reproduced or transmitted in any manner without express written permission from Microsoft Corporation.","resourceSets":[{"estimatedTotal":1,"resources":[{"__type":"Location:http:\/\/schemas.microsoft.com\/search\/local\/ws\/rest\/v1","bbox":[47.275809008582883,-122.25881456692279,47.283534443724236,-122.24363249293789],"name":"100 Main St, Algona, WA 98001","point":{"type":"Point","coordinates":[47.279671726153559,-122.25122352993034]},"address":{"addressLine":"100 Main St","adminDistrict":"WA","adminDistrict2":"King County","countryRegion":"United States","formattedAddress":"100 Main St, Algona, WA 98001","locality":"Algona","postalCode":"98001"},"confidence":"High","entityType":"Address","geocodePoints":[{"type":"Point","coordinates":[47.279671726153559,-122.25122352993034],"calculationMethod":"InterpolationOffset","usageTypes":["Display"]},{"type":"Point","coordinates":[47.279653371643015,-122.25128403728938],"calculationMethod":"Interpolation","usageTypes":["Route"]}],"matchCodes":["Good"]}]}],"statusCode":200,"statusDescription":"OK","traceId":"591320e018b0476cbbe71f338ecab555|BN1EAE8F4E|7.7.0.0|Ref A: 3983F574345D41A782020BC15BA6BF08 Ref B: BN3EDGE0210 Ref C: 2019-05-04T04:30:29Z"}
componentDidMount
. Внутри de render () естьresources
, но эта переменная никогда не объявлялась. Еще один хороший совет: попробуйте использовать деструктор для состояния и свойств. - person Edison Junior   schedule 04.05.2019use chrome
- почему? - person Jaromanda X   schedule 04.05.2019