当尝试在React中以某种形式使用react-select模块时，来自一个JSON文件的数据将覆盖另一个JSON数据集

Question

早上好，我通过复制此处找到的react-select-country-list https://www.npmjs.com/package/react-select-country-list并修改文件以显示美国州而非国家/地区来创建新的节点模块。

新模块一切正常，除了我打算实施它的时候。

我正在尝试建立一个联系页面，用户可以在其中输入带有美国州（不需要）和国家/地区的联系地址。

[这样做时，“ country”数据被“ state”数据覆盖，我不知道在jsx文件中区分countrys模块和us States模块的方法。

[国家/地区和国家/地区下拉菜单均显示美国各州，期望的行为是显示“国家/地区”下拉列表中的国家/地区，以及针对“国家/地区”下拉列表中的美国各州。

我不希望国家/地区下拉列表和州/地区下拉列表之间有任何区别，因为我不知道如何做，所以没有做任何区分两者的事情。

有人会向我解释如何区分jsx文件中的两个模块吗？或者，如果还有其他更好的方法，请告诉我。我是React的新手。

这是我的jsx组件代码：

import React from "react";
import Select from "react-select";
import countryList from "react-select-country-list";
import usstatesList from "react-select-usstates-list";

// reactstrap components
import {
  Card,
  CardHeader,
  CardBody,
  CardTitle,
  FormGroup,
  Form,
  Row,
  Col
} from "reactstrap";

class AddNewContact extends React.Component {
  constructor(props) {
    super(props);

    this.options = countryList().getData();

    this.options = usstatesList().getData();

    this.state = {
      options: this.options,
      value: null
    };
  }

  changeHandler = value => {
    this.setState({ value });
  };

  render() {
    return (
      <>
        <div className="content">
          <Row>
            <Col md="12">
              <Card className="card-user">
                <CardHeader>
                  <CardTitle tag="h5">Add Customer Info</CardTitle>
                </CardHeader>
                <CardBody>
                  <Form>
                    <Row>
                      <Col className="pl-1" md="6">
                        <FormGroup>
                          <label>State</label>
                          <Select
                            options={this.state.options}
                            value={this.state.value}
                            onChange={this.changeHandler}
                          />
                        </FormGroup>
                      </Col>
                      <Col className="pl-1" md="6">
                        <FormGroup>
                          <label>Country</label>
                          <Select
                            options={this.state.options}
                            value={this.state.value}
                            onChange={this.changeHandler}
                          />
                        </FormGroup>
                      </Col>
                    </Row>
                  </Form>
                </CardBody>
              </Card>
            </Col>
          </Row>
          >
        </div>
      </>
    );
  }
}

export default AddNewContact;

Answer 1

您可以通过将this.options重命名为this.countryOptions（对于国家/地区，将其重命名为this.usStateOptions对于美国各州，来解决您的问题。在this.state中，删除options属性，然后将this.countryOptions和this.usStateOptions用于下拉菜单。我希望这有帮助。

您的课程应该像这样：

class AddNewContact extends React.Component {
    constructor(props) {
    super(props);

    this.countryOptions = countryList().getData();

    this.usStateOptions = usstatesList().getData();

    this.state = {
      value: null
    };
  }

  changeHandler = value => {
    this.setState({ value });
  };

  render() {
    return (
      <>
        <div className="content">
          <Row>
            <Col md="12">
              <Card className="card-user">
                <CardHeader>
                  <CardTitle tag="h5">Add Customer Info</CardTitle>
                </CardHeader>
                <CardBody>
                  <Form>
                    <Row>
                      <Col className="pl-1" md="6">
                        <FormGroup>
                          <label>State</label>
                          <Select
                            options={this.usStateOptions}
                            value={this.state.value}
                            onChange={this.changeHandler}
                          />
                        </FormGroup>
                      </Col>
                      <Col className="pl-1" md="6">
                        <FormGroup>
                          <label>Country</label>
                          <Select
                            options={this.countryOptions}
                            value={this.state.value}
                            onChange={this.changeHandler}
                          />
                        </FormGroup>
                      </Col>
                    </Row>
                  </Form>
                </CardBody>
              </Card>
            </Col>
          </Row>
          >
        </div>
      </>
    );
  }
}