在react js中使用api自动填充zipcode中的州和城市

Question

我正在添加邮政编码验证。如果输入邮政编码，则调用有效性API，并根据API响应的响应设置州和城市。API响应是:

{
"data": {
"city": "SAN FRANCISCO",
"state": "CA",
"zip": "94103"
}
}

我像这样调用这个API:

export const zipValidation = (data, callback) => (dispatch) => {
return dispatch(
apiCallBegan({
url: zipUrl,
data,
callback,
method: "POST",
})
);
};

我编写了一个函数来调用API并存储响应:

zipCallback = (res) => {
console.log(res.data.data.city)
if (res.status === 200) {
const city = res.data.data.city;
const state = res.data.data.state;
}
} 

但是我无法获得如何在我的react js输入表单中设置此字段的逻辑。

<div>
<div>
{this.renderInput("zip", "Zip")}
</div>
</div>

<div>
<div>
{this.renderInput("city", "City", )}
</div>
</div>
</div>
<div>
<div>
{this.renderInput("state", "State", )}
</div>
</div>
</div>

任何帮助都是感激的。

Answer 1

解析:

zipCallback = (res) => {
if (res.status === 200) {
const {data, errors} = this.state;
data.city = res.data.data.city;
data.state = res.data.data.state;
errors.city = "";
errors.state = "";
this.setState({data, errors})
} else {
toast(<AlertError message={res.data.error.Description} />);
}

}