如何在 React.js 的单个组件中根据选定的国家/地区下拉列表两次填充 State 下拉列表数据？

Question

我想根据所选国家/地区填充 state 数据。 这工作正常。

但是我有两个在一个页面中多次使用这个条件。 我怎样才能做到这一点？

附上问题截图：-

沙盒 Url:- https://codesandbox.io/s/country-state-sibling-issue-rdphoc?file=/src/App.js

我的代码：-

 import React, { useState, useEffect } from "react"; import "./styles.css"; import { TextField, MenuItem } from "@mui/material"; export default function App() { const body = [ { state_ID: 1, state: "Delhi", country_ID: 1, country_name: "India" }, { state_ID: 2, state: "Mumbai", country_ID: 1, country_name: "India" }, { state_ID: 3, state: "Calgary", country_ID: 2, country_name: "Canada" }, { state_ID: 4, state: "Toronto", country_ID: 2, country_name: "Canada" } ]; const [country, setCountry] = useState([]); const [state, setState] = useState([]); const [selectedCountry, setSelectedCountry] = useState(""); useEffect(() => { const uniqValues = [...new Map(body.map((item) => [item["country_name"], item])).values() ]; setCountry(uniqValues); setState(body); }, []); useEffect(() => { const newStates = body.filter( ({ country_name }) => country_name === selectedCountry ); console.log(selectedCountry, newStates); setState(newStates); }, [selectedCountry]); useEffect(() => {}, [body, country]); return ( <> <TextField className="ruleContainer" select name="Country" label="Country" variant="outlined" size="small" onChange={(event) => setSelectedCountry(event.target.value)} > {country? country.map((opt) => ( <MenuItem key={opt.country_name} value={opt.country_name} onChange={(value) => setSelectedCountry(value)} > {opt.country_name} </MenuItem> )): ""} </TextField> <TextField className="ruleContainer" select name="state" label="State" variant="outlined" size="small" value="" > {state? state.map((opt) => ( <MenuItem key={opt.state} value={opt.state}> {opt.state} </MenuItem> )): ""} </TextField> <hr /> <TextField className="ruleContainer" select name="Country" label="Country" variant="outlined" size="small" onChange={(event) => setSelectedCountry(event.target.value)} > {country? country.map((opt) => ( <MenuItem key={opt.country_name} value={opt.country_name} onChange={(value) => setSelectedCountry(value)} > {opt.country_name} </MenuItem> )): ""} </TextField> <TextField className="ruleContainer" select name="state" label="State" variant="outlined" size="small" value="" > {state? state.map((opt) => ( <MenuItem key={opt.state} value={opt.state}> {opt.state} </MenuItem> )): ""} </TextField> <hr /> </> ); }

感谢您的努力！

Answer 1

实现多个相同的 forms with country 和 state dependent。 您需要使用这些表单字段创建自定义组件并在其中维护 state。 所以不会影响主组件state。

您可以在https://codesandbox.io/s/country-state-sibling-issue-forked-9wcmi9?file=/src/App.js找到工作示例

CountryStateFormItems 组件

import { useState, useEffect } from "react";
import { TextField, MenuItem, Box } from "@mui/material";

const body = [
  {
    state_ID: 1,
    state: "Delhi",
    country_ID: 1,
    country_name: "India"
  },
  {
    state_ID: 2,
    state: "Mumbai",
    country_ID: 1,
    country_name: "India"
  },
  {
    state_ID: 3,
    state: "Calgary",
    country_ID: 2,
    country_name: "Canada"
  },
  {
    state_ID: 4,
    state: "Toronto",
    country_ID: 2,
    country_name: "Canada"
  }
];

export default function CountryStateFormItems(props) {
  const [country, setCountry] = useState([]);
  const [state, setState] = useState([]);
  const [selectedCountry, setSelectedCountry] = useState(props.form.country);
  const [selectedState, setSelectedState] = useState(props.form.state);

  useEffect(() => {
    const uniqValues = [
      ...new Map(body.map((item) => [item["country_name"], item])).values()
    ];
    setCountry(uniqValues);
  }, []);

  useEffect(() => {
    const newStates = body.filter(
      ({ country_name }) => country_name === selectedCountry
    );
    setState(newStates);
  }, [selectedCountry]);

  useEffect(() => {
    props.updateForm(props.index, selectedCountry, selectedState);
  }, [selectedState]);

  return (
    <>
      <Box display="flex">
        <TextField
          style={{ flex: 1 }}
          className="ruleContainer"
          select
          name="Country"
          label="Country"
          variant="outlined"
          size="small"
          value={selectedCountry}
          onChange={(event) => setSelectedCountry(event.target.value)}
        >
          {country
            ? country.map((opt) => (
                <MenuItem
                  key={opt.country_name}
                  value={opt.country_name}
                  onChange={(value) => setSelectedCountry(value)}
                >
                  {opt.country_name}
                </MenuItem>
              ))
            : ""}
        </TextField>
        &nbsp;
        <TextField
          style={{ flex: 1 }}
          className="ruleContainer"
          select
          name="state"
          label="State"
          variant="outlined"
          size="small"
          value={selectedState}
          onChange={(event) => setSelectedState(event.target.value)}
        >
          {state
            ? state.map((opt) => (
                <MenuItem
                  key={opt.state}
                  value={opt.state}
                  onChange={(value) => setSelectedState(value)}
                >
                  {opt.state}
                </MenuItem>
              ))
            : ""}
        </TextField>
      </Box>
      <hr />
    </>
  );
}

应用组件

import React, { useState, useCallback } from "react";
import "./styles.css";
import { Button } from "@mui/material";
import CountryStateFormItems from "./CountryStateFormItems";

export default function App() {
  const [forms, setForms] = useState([]);

  const addForm = () => {
    const existingForms = [...forms];
    existingForms.push({
      country: "",
      state: ""
    });
    setForms(existingForms);
  };

  const updateForm = useCallback(
    (index, country, state) => {
      const existingForms = [...forms];
      existingForms[index].country = country;
      existingForms[index].state = state;
      setForms(existingForms);
    },
    [forms, setForms]
  );

  const printForm = () => {
    console.log(forms);
  };

  return (
    <>
      <Button variant="contained" onClick={addForm}>
        Add
      </Button>
      &nbsp;
      <Button variant="contained" onClick={printForm}>
        Print
      </Button>
      <hr />
      {forms
        ? forms.map((form, index) => (
            <CountryStateFormItems
              key={index}
              index={index}
              form={form}
              updateForm={updateForm}
            />
          ))
        : ""}
    </>
  );
}

Answer 2

您可以使用两个 state 变量来存储这两个国家。 例如：

const [selectedCountry1, setSelectedCountry2] = useState("");
const [selectedCountry2, setSelectedCountry2] = useState("");

同样，您也可以使用 2 个变量来存储国家/地区的state值。

---

或者，您也可以将其存储在带有多个密钥的单个 state object 中，例如：

const [selectedCountriesObject, setSelectedCountriesObject] = useState({ country1: "", country2: ""});

Answer 3

您需要管理 state 中的对象数组。这里有一个很好的资源来解释如何做到这一点： 管理 State 数组。 我希望它有所帮助！