错误:尝试使用react自动填充地址时必须提供apikey

Question

我正在尝试制作一个需要您地址的表单，我决定使用react-autofill-address，这样它就会自动填充。我刚刚从npm站点复制了代码，它给了我错误Error: Must supply apikey。

这是代码：

import React from 'react';
import Address from 'react-autofill-address'
class AddressForm extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
setPlace(place) {
this.setState({ place })
}
render() {
const { place } = this.state
return (
<div className="container">
<div className="form-container">
<div className="header">
<h1>Creating a Member (cont.)</h1>
</div>
<Address
apikey={process.env.GOOGLE_API_KEY}
onChange={place => this.setPlace(place)}
timer={300} // Throttle the onChange event
/>
<pre>{JSON.stringify(place, null, 2)}</pre>
</div>
</div>
);
}
}
export default AddressForm;

我看到顶点已经设置好了，所以我不确定出了什么问题。感谢您的帮助。

Answer 1

控制台记录进程。env.GGOOGLE_API_KEY您可能会得到未定义的。不确定你是否知道什么是api密钥，根据你的问题，这还不清楚，但process.env.GGOOGLE_api_key不是实际的api密钥。你需要在谷歌开发者控制台中向谷歌注册一个，并在你的应用程序中设置它。

如果您已经有一个api密钥，那么在react中，您通常需要在所有环境变量之前添加react_APP_，这样它看起来就像process.env.react_APP_GOOGLE_api_key，或者您可以手动将其添加到表单中，如apikey={'your-api-key-here'}。查看如何在此处添加自定义环境变量React添加自定义环境变体