使用setState传递一个函数,来更新依赖于this.props或this.state 的变量

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

 

React的setState是异步的。在更新依赖于this.props或this.state ,使用this.setState里传Object的写法是不可靠的。在复杂应用中如果this.setState被调用多次可能会出错。

原因是React的更新是异步的,使用按批更新来提升DOM的性能。

可靠的写法是在需要依赖this.propsthis.state 更新值的时候,向this.setState传递一个函数。

不可靠的写法:

this.setState({showForm : !this.state.showForm});

可靠的写法:

this.setState(function(prevState, props){
return {showForm: !prevState.showForm}
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这段代码是一个函数 `queryMultipleSelection(data, type, placeholder)`,它返回一个 `TreeSelect` 组件用于实现多选下拉框的功能。下面是对代码的解释: 首先,定义了一个空数组 `statusArr`,用于存储选项的状态。如果 `this.props.historyData` 存在且 `this.props.historyData.form` 为 "OrderBoard",则将 `this.props.historyData.queryContent.Order_Status` 赋值给 `statusArr`。否则,`statusArr` 为空数组。 然后,创建了一个名为 `treeData` 的副本,并保存在变量中。 接下来,定义了一个名为 `tProps` 的对象,它包含了 `TreeSelect` 组件的一些属性配置。这些属性包括: - `treeData`:树形数据源 - `value`:当前选中的值,从组件的状态 `this.state[type]` 中获取 - `defaultValue`:默认选中的值,从组件的状态 `this.state[type + "Default"]` 中获取,默认为空数组 - `onChange`:选项改变时的回调函数,先设置为空字符串后面再赋值 - `maxTagCount`:最多显示的标签数量,这里设置为 1 - `treeCheckable`:树节点是否可选中 - `treeNodeFilterProp`:根据节点属性搜索过滤节点,默认为 "title" - `treeDefaultExpandAll`:默认展开所有树节点 - `showCheckedStrategy`:定义选中项的父子节点状态显示逻辑,这里设置为 `SHOW_PARENT` - `getPopupContainer`:指定弹出层的渲染父节点,默认为触发节点的父节点的父节点 - `placeholder`:选择框默认显示的提示文本 - `size`:选择框的尺寸,这里设置为 "middle" - `className`:选择框的自定义类名,这里设置为 "common-tree-select" 接着,通过将一个匿名函数赋值给 `tProps.onChange`,定义了选项改变时的回调函数。在回调函数中,使用 `this.setState` 更新组件的状态,将选中的值赋给类型为 `type` 的状态。 如果 `type` 是 "status" 或 "warning",则额外设置了以下属性: - `autoClearSearchValue`:是否在选中项后自动清除搜索关键字,默认为 `false` - `searchValue`:用于控制搜索框的值,从组件的状态 `this.state[type + "Search"]` 中获取 - `dropdownClassName`:自定义下拉菜单类名,根据搜索框是否有值动态添加类名 - `onSearch`:搜索框输入时的回调函数,通过 `bind` 绑定了回调函数的上下文为当前组件,并传入了类型 `type` - `onBlur`:失去焦点时的回调函数,通过 `bind` 绑定了回调函数的上下文为当前组件,并传入了类型 `type` 最后,返回一个 `<TreeSelect {...tProps} />` 组件,将上述定义的 `tProps` 对象作为属性传递给 `TreeSelect` 组件。 这段代码主要实现了一个多选下拉框的功能,并根据不同的类型和状态进行了一些属性配置。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值