setState 和 index 的 react-dropdown-tree-select 问题答案

【问题标题】：react-dropdown-tree-select issues with setState and indexsetState 和 index 的 react-dropdown-tree-select 问题
【发布时间】：2020-11-27 07:58:12
【问题描述】：

我在组件中使用 react 下拉树选择。

class PriceComponent extends Component {
    constructor(props) {
        this.state = {
          index: 0,
          rate: [{
             price: 0,
             regions: []
          }]
        }
    }

    //add more event
    addMore = () => {
       this.setState({ rate: this.state.rate.concat([{ price: 0, regions: [] }]) })
    }

    //dropdown tree select
    onChange = (currentNode, selectedNodes) => {
       const arr_values = selectedNodes.map(v => v.value);
    }

   //price change
   handleChange = (e) => {
       this.setState({
         [e.target.name]: e.target.value
       })
   }

    render() {
        //many fields
        {this.state.rate.map((r, idx) => (
            <div key={idx}>
               <input type="text" name="price" onChange={(e) => this.handleChange(e, i)} />
               <DropdownTreeSelect data={regions} onChange={this.onChange} />
            </div>
        )}
        <button onClick={this.addMore.bind(this)}>Add More</button>
    }
}

以上是我的代码，但我遇到了一些问题，我不知道如何继续。

在下拉组件的 onChange 中，如果我执行 setState，它会不断重新渲染，所以我尝试了“prevent re-render on parent”，但我收到错误消息，提示数据未定义（我已将 componentWillReceiveProps 替换为 getDerivedStateFromProps）
当添加一组新字段（价格 + 区域）时，之前区域下拉列表中的值会刷新。这可以预防吗？
有没有办法获取下拉列表的索引？我尝试使用 onChange 传递索引，但没有成功。

感谢任何帮助。提前致谢。

【问题讨论】：

标签： reactjs react-dropdown-tree-select

【解决方案1】：

在您的区域变量需要是状态变量。在导致重新渲染的任何状态更改中，区域需要反映您在 DropdownTreeSelect 下拉列表中选择/未选择的内容。

我通过调整 onChange 方法来修改区域状态变量解决了我的问题，因此当 DropdownTreeSelect 重新渲染时，您的区域需要选中或取消选中其子项。

【讨论】：