当我向服务器发送一个post请求时，用户的role是seller，其中有2个额外的JSON属性:resName和resAddress。我也使用placeautocomplete(从谷歌)来获得餐厅的地址(它的名字可以是任何东西)。Register.js:
import logo from './logo.svg';
import './App.css';
import React, { Component, useEffect } from 'react';
import { useState } from 'react';
import axios from 'axios';
import LocationSearchInput from './placeComplete';
function Register() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [role, setRole] = useState("seller");
const [resName, setResName] = useState("");
const [resAddress, setResAddress] = useState(React.createRef());
async function registerUser(e){
e.preventDefault();
if (role === 'seller'){
const restaurantAddress = resAddress.current
console.log(restaurantAddress.state.address, resName)
}
const response = await axios.post('/api/users/register',
{
name,
email,
password,
resName,
resAddress,
role
}
).then(
res => {
console.log(res.data)
}
)
}
function registerRestaurant(){
if (role === 'seller'){
return(
<div>
<h4>Restaurant Name:</h4> <br />
<input type='text'
placeholder='Restaurant Name'
value={resName}
onChange={(e) => setResName(e.target.value)}
/>
<br />
<LocationSearchInput ref={resAddress} />
</div>
);
}
}
return (
<div>
<form onSubmit={registerUser}>
<input type="name" placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<br />
<input type="email" placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<br />
<input type="password" placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<br />
<input type='radio' value='customer'
checked={role === 'customer'}
onChange={(e) => {
setRole(e.target.value)
}}
/>
customer
<br />
<input type='radio' value='seller'
checked={role === 'seller'}
onChange={(e) => {
setRole(e.target.value)
}}
/>
seller
<br />
{registerRestaurant()}
<input type='submit' value='Register' />
</form>
</div>
);
}
export default Register;
placeComplete.js:
import React from 'react';
import PlacesAutocomplete, {
geocodeByAddress,
getLatLng,
} from 'react-places-autocomplete';
class LocationSearchInput extends React.Component {
constructor(props) {
super(props);
this.state = { address: '' };
}
handleChange = address => {
this.setState({ address });
};
handleSelect = address => {
geocodeByAddress(address)
.then(results => getLatLng(results[0]))
.then(latLng => console.log('Success', latLng))
.then(this.setState({address: address}))
.catch(error => console.error('Error', error));
};
render() {
return (
<PlacesAutocomplete
value={this.state.address}
onChange={this.handleChange}
onSelect={this.handleSelect}
>
{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
<div>
<input
{...getInputProps({
placeholder: 'Search Places ...',
className: 'location-search-input',
})}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map(suggestion => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? { backgroundColor: '#fafafa', cursor: 'pointer' }
: { backgroundColor: '#ffffff', cursor: 'pointer' };
return (
<div
{...getSuggestionItemProps(suggestion, {
className,
style,
})}
>
<span>{suggestion.description}</span>
</div>
);
})}
</div>
</div>
)}
</PlacesAutocomplete>
);
}
}
export default LocationSearchInput;
当我开始输入resAddress时，我也得到了以下警告:
react_devtools_backend.js:4026 Warning: Each child in a list should have a unique "key" prop. Check the render method of `PlacesAutocomplete`. See https://reactjs.org/link/warning-keys for more information.
请注意，服务器正在通过邮递员接受请求。
如果你没有发送正确的JSON，这个错误通常会被抛出。您的问题似乎发生在这里:
const response = await axios.post('/api/users/register',
{
name,
email,
password,
resName,
resAddress,
role
}
).then(
res => {
console.log(res.data)
}
)
由于resAddress是ref(不是正确的JSON):
const [resAddress, setResAddress] = useState(React.createRef());
改成这样就可以了:
{
/* ... */
resAddress: resAddress.current.state.address
/* ... */
}