reactjs - 如何在 ReactJs 中将默认值设置为道具?
问题描述
我有一系列数据,其中包含数组(json 文件)中的一些对象,它将通过fetch
请求显示。有一个renderMinTotal()
函数必须让我得到totalcom
json 文件所有数据的最小输入数。这个函数可以正常工作,但是我希望默认值FilterTotal
是renderMinTotal()
. 为此我写了这段代码:
let defaultFilterTotal = null;
defaultFilterTotal = FilterTotal
? (FilterTotal)
: (this.renderMinTotal ());
但默认值为空。为什么它没有被设置为默认值
FilterTotal
?
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
library: null,
perPage: 20,
currentPage: 1,
maxPage: null,
FilterTotal: "",
};
}
componentDidMount() {
fetch('/json.bc', {
method: 'get',
})
.then(response => response.text())
.then(text => {
let Maindata = JSON.parse(text.replace(/\'/g, '"'))
this.setState(state => ({
...state,
data: Maindata
}), () => {
this.reorganiseLibrary()
})
}).catch(error => console.error(error))
}
reorganiseLibrary = () => {
const { FilterTotal, perPage, data } = this.state;
let library = data;
let defaultFilterTotal = null;
defaultFilterTotal = FilterTotal
? (FilterTotal)
: (this.renderMinTotal()); //The default value of FilterTotal is not been set .////
if (FilterTotal !== "") {
library = library.filter(item =>
item.totalCom > FilterTotal
)
}
library = _.chunk(library, perPage);
this.setState({
library,
currentPage: 1,
maxPage: library.length === 0 ? 1 : library.length
})
}
// Previous Page
previousPage = event => {
this.setState({
currentPage: this.state.currentPage - 1
})
}
// Next Page
nextPage = event => {
this.setState({
currentPage: this.state.currentPage + 1
})
}
// handle per page
handlePerPage = (evt) =>
this.setState({
perPage: evt.target.value
}, () => this.reorganiseLibrary());
// handle render of library
renderLibrary = () => {
const { library, currentPage } = this.state;
if (!library || (library && library.length === 0)) {
return <div className="nodata">No Result</div>
}
return library[currentPage - 1].sort((a, b) => a.total - b.total).map((item, i) => (
<div className="item">
<span>{this.renderTotalcom(item)}</span>
</div>
))
}
// handle render of library
renderMinTotal = () => {
const { library } = this.state;
if (!library || (library && library.length === 0)) {
return ''
}
return library.reduce((acc, lib) => {
const libMin = Math.min(...lib.map(item => item.totalCom))
return acc === undefined ? libMin : libMin < acc ? libMin : acc
}, undefined)
}
render() {
const { library, currentPage, perPage, maxPage } = this.state;
return (
<div>
<span className="max">{this.renderMinTotal()}</span>
{this.renderLibrary()}
<ul id="page-numbers">
<li className="nexprevPage">
{currentPage !== 1 && (
<button onClick={this.previousPage}><span className="fa-backward"></span></button>
)}
</li>
<li className="controlsPage active">{this.state.currentPage}</li>
<li className="restControls">...</li>
<li className="controlsPage">{this.state.maxPage}</li>
<li className="nexprevPage">
{(currentPage < maxPage) && (<button onClick={this.nextPage}><span className="fa-forward"></span></button>
)}
</li>
</ul>
</div>
)
}
renderTotalcom(element) {
return element.totalCom
}
}
ReactDOM.render(<App />, document.getElementById('Result'))
解决方案
如果没有库,代码将返回 this,因此它将是一个空字符串,就像 this.state.FilterTotal 最初是一个空字符串一样
if (!library || (library && library.length === 0)) {
return ''
}
推荐阅读
- flutter - Flutter:无法将列表动态添加到子小部件列表
- python - Python记录额外信息
- android - 使用等级在 Android 上创建胖(超级)aar
- android - Alert Dialog Not Showing Correct Text
- functional-programming - (方案)检查项目列表是否都满足逻辑关系
- ios - iOS Charts, data label customization
- apache - 在所有控制器的 symfony 中更改 baseURL
- java - 2个数之和为素数
- javascript - html2canvas 无法正确渲染带有修饰符的表情符号
- c - For loop program returns [value]i instead of [value]