为什么我不能通过数组进行映射

Question

我想通过数组映射，但我得到一个错误：TypeError： locationAddress.map不是一个函数

我是新来的反应和反应钩。我一直试图简化数组，但运气不好。知道为什么这不起作用吗？

编辑：到目前为止，我尝试了答案中的所有更改，但错误仍然存在。我包括了更多的代码和包。json文件。我尝试停用一些函数，如useEffect，现在只有在我尝试键入要映射的输入字段时才会显示错误。

找到解决方案：

const [locationAddress, setLocationAddress] = 
useReducer(
    (state, newState) => ([{ ...state, ...newState }]),
    [{
    address: "",
    name: ""
}]);

我使用了useReucer，并尝试在{... state， newState}周围放置一些[]，现在它工作了。感谢那些回答的人。当您有涉及多个子值的复杂状态逻辑时，useReucer通常比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"
    ]
  }
}

Answer 1

您的代码应该按原样工作，因为您的locationAddress是由useStatehook初始化的对象数组。

我复制了您的代码，只做了一些调整：

1. 您在. map（）中的位置，需要分解为地址和名称。那么只有您可以以现在的方式在FormControl中访问它。（或者将FormControl的值更改为location.address和location.name。
2. 在location地址中添加了默认数据，以确保您可以出于测试目的访问它。

代码片段

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>
  );
}

在使用钩子之前，请确保您的反应位于v16.8.0（或更高）。

The sandbox [link][1].


  [1]: https://codesandbox.io/s/dazzling-hellman-u4vc5

Answer 2

你的代码看起来是对的。使用ocation地址试试这个

               <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>