我对async await
后端非常熟悉nodejs
。但是我遇到了一种情况,我必须在前端使用它。
我正在获取对象的数组,并且在那些对象中我获取lat lng
了位置。现在,react-geocode
我可以获取单个地点名称,lat lng
但是我想在map函数中使用该名称来获取地点名称。因此,正如我们所知道的那样,async
我必须async await
在那边使用。
这是代码
import Geocode from "react-geocode";
render = async() => {
const {
phase,
getCompanyUserRidesData
} = this.props
return (
<div>
<tbody>
await Promise.all(_.get(this.props, 'getCompanyUserRidesData', []).map(async(userRides,index) => {
const address = await Geocode.fromLatLng(22.685131,75.873468)
console.log(address.results[0].formatted_address)
return (
<tr key={index}>
<td>
{address.results[0].formatted_address}
</td>
<td>Goa</td>
<td>asdsad</td>
<td>{_.get(userRides,'driverId.email', '')}</td>
<td>{_.get(userRides,'driverId.mobile', '')}</td>
</tr>
)
}))
</tbody>
</div>
)
}
但是,当我在此处将异步函数与map函数一起使用时,它不会返回任何内容。谁能帮我解决我的问题?
您应该始终将获取数据等关注事项与显示数据等关注事项分开。这里有一个父组件,该组件通过AJAX提取数据,然后在输入数据时有条件地呈现纯功能子组件。
class ParentThatFetches extends React.Component {
constructor () {
this.state = {};
}
componentDidMount () {
fetch('/some/async/data')
.then(resp => resp.json())
.then(data => this.setState({data}));
}
render () {
{this.state.data && (
<Child data={this.state.data} />
)}
}
}
const Child = ({data}) => (
<tr>
{data.map((x, i) => (<td key={i}>{x}</td>))}
</tr>
);
我实际上并没有运行它,因此它们可能是一些小错误,并且如果您的数据记录具有唯一的ID,则应将其用于key属性而不是数组索引,但是您会发现jist。
同样的事情,但是使用钩子更简单,更短:
const ParentThatFetches = () => {
const [data, updateData] = useState();
useEffect(() => {
const getData = async () => {
const resp = await fetch('some/url');
const json = await resp.json()
updateData(json);
}
getData();
}, []);
return data && <Child data={data} />
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句