Question

我为选择的用户位置添加了一个下拉列表，它可以工作，但是有一个问题，您可以查看演示 Here 。

如您所见，有一个预选字段对吗？这来自数据库，这意味着用户以前选择了它，现在单击提交，然后检查控制台。

看起来您获得了正确的值，但是现在，如果您先更改省份，然后再更改城市，然后再单击地区，然后再次单击提交，则地区值是错误的，它仍然具有初始值+新值。

我该如何解决？

到目前为止，我尝试的是对这样的地区状态进行棘手的刷新：

getDistrict = (e, data) => {
    this.setState({
        districtValue: null // here I make it null
    }, () => {
        this.setState({
            districtValue: data.value // after call back fill it again
        })
    });
    console.log(data.value) // but already return previous one + new one
}

Answer 1

查看更改：用//这一行评论

const {
  Dropdown
} = semanticUIReact


class App extends React.Component {

  state = { 
              DistrictData: null,
            ProvinceData: null,
            CityData: null,
            provinceValue: null,
            cityValue: null,
            districtValue: null
  }

componentDidMount() {
    const Data = {
    ProvinceData: [{
      "id": "1",
      "name": "Istanbul"
    }, {
      "id": "2",
      "name": "Ankara"
    }
                  ],
    CityData: [{
      "id": "1",
      "name": "Istanbul",
      "pid" : "1"
    }, {
      "id": "2",
      "name": "Ankara",
      "pid" : "2"
    }
              ],
    DistrictData: [
      {
        "id": "1",
        "name": "sisli",
        "cid" : "1"
      }, {
        "id": "2",
        "name": "istiklal",
        "cid" : "1"
      }, {
        "id": "3",
        "name": "taksim",
        "cid" : "1"
      },{
        "id": "4",
        "name": "mahmut pasa",
        "cid" : "2"
      },{
        "id": "5",
        "name": "edirine",
        "cid" : "1"
      },{
        "id": "6",
        "name": "soltan ahmat",
        "cid" : "1"
      },{
        "id": "7",
        "name": "galata",
        "cid" : "1"
      },{
        "id": "8",
        "name": "kizilay",
        "cid" : "2"
      }

    ]};
            this.setState({
            DistrictData: Data.DistrictData,
            ProvinceData: Data.ProvinceData,
            CityData: Data.CityData,
            provinceValue: "1",
            cityValue: "1",
            districtValue: ["5"]
        })
}


    getProvince = (e, {value}) => {
        this.setState({
            provinceValue: value,
            districtValue: [] // this line
        });

    };

    getCity = (e, {value}) => {
        this.setState({
            cityValue: value,
            districtValue: [] // this line
        });
    };

    getDistrict = (e, data) => {
        this.setState({
            districtValue: [] // this line
        }, () => {
            this.setState({
                districtValue: data.value
            }, console.log(data.value))
        });

    }

    check = (e) => {
        console.log(this.state.provinceValue)
        console.log(this.state.cityValue)
        console.log(this.state.districtValue)
    }

render() {
        const ProvinceOptions = this.state.ProvinceData && this.state.ProvinceData.map((v, index) => ({
            key: index,
            text: v.name,
            value: v.id,
        }));
        const CityOptions = this.state.CityData && this.state.CityData.filter(x => x.pid === this.state.provinceValue).map((v,i)  =>{
            return {
                key: i,
                value : v.id,
                text: v.name
            }
        });
        const DistrictOptions = this.state.DistrictData && this.state.DistrictData.filter(x => x.cid === this.state.cityValue).map((v,i)  =>{
            return {
                key: i,
                value : v.id,
                text: v.name
            }
        });

  return (
    <div>
      <label>Province</label>
      <Dropdown
        search selection
        options={ProvinceOptions}
        onChange={this.getProvince}
        value={this.state.provinceValue}
        />
      <label>City</label>
      <Dropdown
        search selection
        options={CityOptions}
        onChange={this.getCity}
        value={this.state.cityValue}
        />
      <label>District</label>
      <Dropdown
        selection multiple search
        options={DistrictOptions}
        onChange={this.getDistrict}
        value={this.state.districtValue}
        />
        <button onClick={this.check}>Submit</button>
    </div>
  )
}
}

ReactDOM.render(<App />, document.getElementById('app'));

更改后ReactJs状态不会更新

1 个答案: