fix: this.treeData

linketech · Oct 31, 2019 · ed81c7f · ed81c7f
1 parent b4deb4f
commit ed81c7f
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 71 deletions.
diff --git a/src/pages/home/components/SideSelect.jsx b/src/pages/home/components/SideSelect.jsx
@@ -4,81 +4,81 @@ import { TreeSelect } from 'antd'
 import { debounce } from 'lodash'
 
 export default class SideSelect extends Component {
-	static propTypes = {
-		isLargeScreen: PropTypes.bool,
-		treeData: PropTypes.array,
-		changeSelection: PropTypes.func,
-		selection: PropTypes.string,
-	}
+  static propTypes = {
+    isLargeScreen: PropTypes.bool,
+    treeData: PropTypes.array,
+    changeSelection: PropTypes.func,
+    selection: PropTypes.string,
+  }
 
-	componentDidUpdate(prevProps, prevState) {
-		if (this.props.selection !== prevProps.selection) {
-			this.setState({ value: this.props.selection })
-		}
-	}
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.selection !== prevProps.selection) {
+      this.setState({ value: this.props.selection })
+    }
+  }
 
-	state = {
-		value: null,
-		width: 0,
-	}
+  state = {
+    value: null,
+    width: 0,
+  }
 
-	componentDidMount() {
-		this.updateWindowDimensions()
-		window.addEventListener('resize', this.updateWindowDimensions)
-	}
+  componentDidMount() {
+    this.updateWindowDimensions()
+    window.addEventListener('resize', this.updateWindowDimensions)
+  }
 
-	componentWillUnmount() {
-		window.removeEventListener('resize', this.updateWindowDimensions)
-	}
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateWindowDimensions)
+  }
 
-	updateWindowDimensions = debounce(() => {
-		// 为保证实时响应，做成 state 而不是 props
-		this.setState({
-			width: window.innerWidth,
-		})
-	}, 1000)
+  updateWindowDimensions = debounce(() => {
+    // 为保证实时响应，做成 state 而不是 props
+    this.setState({
+      width: window.innerWidth,
+    })
+  }, 1000)
 
-	handleChange = (value) => {
-		this.props.changeSelection(value)
-	}
+  handleChange = (value) => {
+    this.props.changeSelection(value)
+  }
 
-	render() {
-		const treeSelect = this.props.isLargeScreen ? (
-			<TreeSelect
-				allowClear
-				dropdownStyle={{
-					height: 465,
-					overflow: 'auto',
-					display: this.state.width < 768 ? 'none' : null,
-				}}
-				placeholder={'结果显示框'}
-				searchPlaceholder={'搜索栏'}
-				showSearch
-				treeData={this.props.treeData}
-				treeDefaultExpandAll
-				value={this.state.value}
-				onChange={this.handleChange}
-				style={{ width: '100%' }}
-				open={true}
-			/>
-		) : (
-			<TreeSelect
-				allowClear
-				dropdownStyle={{
-					height: 465,
-					overflow: 'auto',
-				}}
-				placeholder={'结果显示框'}
-				searchPlaceholder={'搜索栏'}
-				showSearch
-				treeData={this.props.treeData}
-				treeDefaultExpandAll
-				value={this.state.value}
-				onChange={this.handleChange}
-				style={{ width: '100%' }}
-			/>
-		)
+  render() {
+    const treeSelect = this.props.isLargeScreen ? (
+      <TreeSelect
+        allowClear
+        dropdownStyle={{
+          height: 465,
+          overflow: 'auto',
+          display: this.state.width < 768 ? 'none' : null,
+        }}
+        placeholder={'结果显示框'}
+        searchPlaceholder={'搜索栏'}
+        showSearch
+        treeData={this.props.treeData}
+        treeDefaultExpandAll
+        value={this.state.value}
+        onChange={this.handleChange}
+        style={{ width: '100%' }}
+        open={true}
+      />
+    ) : (
+      <TreeSelect
+        allowClear
+        dropdownStyle={{
+          height: 465,
+          overflow: 'auto',
+        }}
+        placeholder={'结果显示框'}
+        searchPlaceholder={'搜索栏'}
+        showSearch
+        treeData={this.props.treeData}
+        treeDefaultExpandAll
+        value={this.state.value}
+        onChange={this.handleChange}
+        style={{ width: '100%' }}
+      />
+    )
 
-		return <div>{treeSelect}</div>
-	}
+    return <div>{treeSelect}</div>
+  }
 }
diff --git a/src/pages/home/index.js b/src/pages/home/index.js
@@ -78,8 +78,8 @@ export default class Home extends Component {
   isLargeScreen = window.innerWidth > 768
 
   // 是否为开发模式
-  // isDebug = false
-  isDebug = true
+  isDebug = false
+  // isDebug = true
 
   urlPrefix = this.isDebug ? '' : 'https://dgps.dbjtech.com'
 
@@ -263,6 +263,9 @@ export default class Home extends Component {
   }
 
   render() {
+    // 由于 this 指针问题，treeData 本应只运算一次的，被迫放在 render 中
+    this.treeData = this.getTreeData()
+
     return (
       <div className={styles.container}>
         <Row>