無法訪問 object 屬性 - 無法讀取未定義的屬性

Question

知道為什么我無法訪問 object 地區的地區財產嗎？

const regions = [ { region: "Hlavní město Praha", districts: "Benešov, Beroun, Kladno, Kolín, Kutná Hora, Mělník, Mladá Boleslav, Nymburk, Praha-východ, Praha-západ, Příbram a Rakovník", }, ] ;

console.log(regions.filter((r) => r.region === regionState)[0].districts)

它拋出一個錯誤說

未捕獲的類型錯誤：無法讀取未定義的屬性（讀取“地區”）

import React, { useState } from "react";
import { Form, Card, Button } from "react-bootstrap";
import validator from "validator";

const StepOne = ({ nextStep, handleFormData, values }) => {
  const [error, setError] = useState(false);
  const [regionState, setRegionState] = useState("");

  const regions = [
    {
      region: "Hlavní město Praha",
      districts:
        "Benešov, Beroun, Kladno, Kolín, Kutná Hora, Mělník, Mladá Boleslav, Nymburk, Praha-východ, Praha-západ, Příbram a Rakovník",
    },
  ];

  const twoCalls = (e) => {
    handleFormData("region");
    setRegionState(e.target.value);

  };
  console.log(regions.filter((r) => r.region === regionState))

  const submitFormData = (e) => {
    e.preventDefault();

    if (
      validator.isEmpty(values.propertyType) ||
      validator.isEmpty(values.region) ||
      validator.isEmpty(values.district)
    ) {
      setError(true);
    } else {
      nextStep();
    }
  };

  return (
    <div>
      <Card style={{ marginTop: 100 }}>
        <Card.Body>
          <Form onSubmit={submitFormData}>
            <Form.Group className="mb-3">
              <Form.Label>Typ nemovitosti</Form.Label>
              <Form.Select
                style={{ border: error ? "2px solid red" : "" }}
                onChange={handleFormData("propertyType")}
              >
                {" "}
                <option>Vyberte nemovitost</option>
                <option value="Dům">Dům</option>
                <option value="Byt">Byt</option>
                <option value="Pozemek">Pozemek</option>
              </Form.Select>
              {error ? (
                <Form.Text style={{ color: "red" }}>
                  Toto je povinné pole
                </Form.Text>
              ) : (
                ""
              )}
            </Form.Group>
            <Form.Group className="mb-3">
              <Form.Label>Kraj</Form.Label>
              <Form.Select
                style={{ border: error ? "2px solid red" : "" }}
                onChange={twoCalls}
              >
                {" "}
                <option>Vyberte kraj</option>
                {regions.map((region) => (
                  <option value={region.region}>{region.region}</option>
                ))}
              </Form.Select>
              {error ? (
                <Form.Text style={{ color: "red" }}>
                  Toto je povinné pole
                </Form.Text>
              ) : (
                ""
              )}
            </Form.Group>
            <Form.Group className="mb-3">
              <Form.Label>Okres</Form.Label>
              <Form.Select
                style={{ border: error ? "2px solid red" : "" }}
                onChange={handleFormData("district")}
              >
                {" "}
                <option>Vyberte okres</option>
 
                )
              </Form.Select>
              {error ? (
                <Form.Text style={{ color: "red" }}>
                  Toto je povinné pole
                </Form.Text>
              ) : (
                ""
              )}
            </Form.Group>

            <Button variant="primary" type="submit">
              Pokračovat
            </Button>
          </Form>
        </Card.Body>
      </Card>
    </div>
  );
};

export default StepOne;

Answer 1

如果 var“regionState”從不匹配“regions”中提供的任何區域，就會發生這種情況。 因為它從不匹配，所以它從數組中過濾掉所有內容，並且沒有“districts”屬性，因為索引 0 處沒有任何內容。

您應該能夠通過打印過濾后的數組或過濾后的數組的長度來看到這一點：

let filteredArr = regions.filter((r) => r.region === regionState);
console.log(filteredArr.length);