我想通过数组进行映射,但出现错误: TypeError:locationAddress.map不是函数
我是React和React Hooks的新手。我一直在尝试简化数组,但是没有运气。 任何想法为什么这不起作用?
编辑:到目前为止,我尝试了所有答案中的更改,但错误仍然存在。 我包括了更多代码和package.json文件。 我尝试停用一些功能,例如useEffect,现在仅当我尝试键入要映射的输入字段时才会显示错误。
找到了解决方案:
const [locationAddress, setLocationAddress] =
useReducer(
(state, newState) => ([{ ...state, ...newState }]),
[{
address: "",
name: ""
}]);
我使用了'useReducer'并尝试在{... state,newState}周围放置一些'[]',现在它可以工作了。 感谢那些回答。 当您具有涉及多个子值的复杂状态逻辑时,useReducer通常比useState更可取。它还可以让您优化触发深层更新的组件的性能,因为您可以传递调度而不是回调。
import React, { Fragment, useState, useEffect, useReducer } from 'react';
import { Form, Button, Container, Row, Col } from 'react-bootstrap';
import axios from 'axios';
const FormData = () => {
const [locationAddress, setLocationAddress] =
useReducer(
(state, newState) => ([{ ...state, ...newState }]),
[{
address: "",
name: ""
}]);
const [coordinates, setCoordinates] = useState();
console.log(JSON.stringify(locationAddress))
useEffect(() => {
const fetchLocation = async () => {
for(let i = 0; i < locationAddress.length; i++) {
const res = await axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: locationAddress[i].address,
key: 'MyAPIKey'
}
});
setLocationAddress(res.data);
setCoordinates(res.data.results[0].geometry.location);
console.log('Coordinates: ' + JSON.stringify(coordinates));
}
}
fetchLocation();
}, [coordinates, locationAddress]);
const onChangeAddress = e => setLocationAddress({ ...locationAddress, [e.target.name]: e.target.value});
const onSubmit = e => {
e.preventDefault();
}
return (
<Fragment>
<Form onSubmit={onSubmit}>
<ul>
{locationAddress && locationAddress.map(({address, name}, index) =>
<li key={index}>
<Form.Group>
<Form.Label htmlFor="address">Enter location</Form.Label>
<Form.Control type="text" name="address" id="address" value={address} onChange={onChangeAddress} />
</Form.Group>
<Form.Group>
<Form.Label htmlFor="name">Enter name</Form.Label>
<Form.Control type="text" name="name" id="name" value={name} onChange={onChangeAddress} />
</Form.Group>
<Form.Group>
<Button variant="secondary" type="submit">Remove friend</Button>
</Form.Group>
</li>
)}
</ul>
<Form.Group>
<Button variant="secondary" type="submit">Add friend</Button>
</Form.Group>
</Form>
</Fragment>
)
}
export default FormData;
Package.json
{
"name": "map-calculator-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"axios": "^0.19.0",
"bootstrap": "^4.4.1",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-axios": "^2.0.3",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-places-autocomplete": "^7.2.1",
"react-scripts": "3.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
答案 0 :(得分:0)
您的代码看起来正确。
使用ocationAddress && locationAddress.map()
<ul>
{locationAddress && locationAddress.map((location, index) =>
<li key={index}>
<Form.Group>
<Form.Label for="address">Enter location</Form.Label>
<Form.Control type="text" name="address" id="address" value={address} />
</Form.Group>
<Form.Group>
<Form.Label for="address">Enter name</Form.Label>
<Form.Control type="text" name="address" id="address" value={address} />
</Form.Group>
<Form.Group>
<Button variant="secondary" type="submit">Remove friend</Button>
</Form.Group>
</li>
)}
</ul>
答案 1 :(得分:0)
您的代码应该按原样工作,因为您的locationAddress
是由useState
钩子初始化的对象数组。
我做了一些调整就复制了您的代码:
.map()
期间的位置需要分解为address
和name
。然后,只有您才能像现在一样以FormControl
的方式访问它。 (或将value
中的FormControl
分别更改为location.address
和location.name
。locationAddress
中添加了默认数据,以确保您可以出于测试目的访问它。代码段
const { useState } = React;
function App() {
const [locationAddress, setLocationAddress] = useState([{
address: "US",
name: "John Doe"
}]);
return (
<div className="App">
<div>
{
locationAddress.map(({ address, name }) => <span>{`${address}-${name}`}</span>)
}
</div>
</div>
);
}
在使用钩子之前,请确保您的
react
位于v16.8.0
(或更高)。
The sandbox [link][1].
[1]: https://codesandbox.io/s/dazzling-hellman-u4vc5