Javascript 加载时函数未显示所有预期数据
下面是React类，它显示了用户列表（缩放器） 每个Javascript 加载时函数未显示所有预期数据,javascript,reactjs,ecmascript-6,Javascript,Reactjs,Ecmascript 6,下面是React类，它显示了用户列表（缩放器） 每个zoomer都有一个名为ishiden的属性 当页面第一次加载时，我希望它只显示具有ishiden=false的缩放者 我制作了一个复选框控件，当选中该控件时，应该显示所有缩放，甚至包括隐藏的缩放 未选中时，我不希望它显示任何带有ishiden=true的缩放器 因此，当我运行web应用程序并加载此React组件时，它最初会显示没有任何用户…隐藏或未隐藏 当我点击复选框时，它会重新加载并显示隐藏的用户 所以它并不是真的在做我想要它做的事情，我也
zoomerishidenishiden=falseishiden=trueexport default class ZoomerGrid extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
zoomers: List(),
showHidden: false
};
}
toggleShowHidden = e => {
const { value } = e.target;
this.setState({ showHidden: true });
}
render() {
let zoomersShowHidden = this.state.zoomers.toJS();
zoomersShowHidden = zoomersShowHidden.filter(x => x.isHidden = this.state.showHidden);
return (
<div>
Show Hidden Zoomers? <input type="checkbox" name="test" onChange={this.toggleShowHidden} value="false" />
{zoomersShowHidden.map((zoomer) => <ZoomerTile key={zoomer.id} zoomer={zoomer} />)}
</div>
);
}
}
Thanks!
导出默认类ZoomerGrid扩展React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
缩放器：列表（），
showHidden:错误
};
}
toggleShowHidden=e=>{
const{value}=e.target；
this.setState（{showHidden:true}）；
}
render（）{
让zoomersShowHidden=this.state.zoomers.toJS（）；
zoomersShowHidden=zoomersShowHidden.filter（x=>x.isHidden=this.state.showHidden）；
返回(
显示隐藏的缩放器？
{zoomersShowHidden.map（（zoomer）=>）}
);
}
}
谢谢
x.ishiden=this.state.showHidden
这是一个赋值而不是一个比较，更改为x.ishiden==this.state.showHiddenx.ishiden=this.state.showHidden
这是一个赋值而不是一个比较，更改为x.ishiden==this.state.showHidden
您的初始状态设置为空列表：
this.state = {
zoomers: List(), <-- This creates an empty Immutable list
showHidden: false
}
此外，您的输入未使用您存储的状态：
<input type="checkbox" name="test" onChange={this.toggleShowHidden} value="false" /> <-- The value is being set to false all the time
此逻辑将首先检查isHidden值是否为false。如果是，它将返回该对象作为筛选器的一部分，以便始终显示非隐藏项。对于下一个或部分，我们知道isHidden在这一点上是正确的，因此我们需要检查以过滤并返回结果的唯一逻辑是检查我们是否希望显示隐藏，因此我们可以在or之后使用showHidden状态
另外，为什么要使用immutable存储在状态中，然后在渲染中将其更改为普通javascript对象？您可以访问不可变对象中的属性，而无需将其转换为JS
以下是一个例子：
export default class ZoomerGrid extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
zoomers: Immutable.fromJS([
{
id: 1,
isHidden: false
},
{
id: 2,
isHidden: true
}
]),
showHidden: false
};
}
toggleShowHidden = () => {
this.setState({ showHidden: !this.state.showHidden });
}
render() {
return (
<div>
Show Hidden Zoomers? <input type="checkbox" name="test" onChange={this.toggleShowHidden} value={this.state.showHidden} />
{
this.state.zoomers
.filter(zoomer => !zoomer.get("isHidden") || this.state.showHidden)
.map(zoomer => <ZoomerTile key={zoomer.get("id")} zoomer={zoomer} />)}
</div>
);
}
}
导出默认类ZoomerGrid扩展React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
zoomers:Immutable.fromJS([
{
id:1，
伊希登：错
},
{
id:2，
伊希登：是的
}
]),
showHidden:错误
};
}
toggleShowHidden=（）=>{
this.setState（{showHidden:！this.state.showHidden}）；
}
render（）{
返回(
显示隐藏的缩放器？
{
这是我的州
.filter（zoomer=>！zoomer.get（“isHidden”）| | this.state.showHidden）
.map（缩放器=>）}
);
}
}
您的初始状态设置为空列表：
this.state = {
zoomers: List(), <-- This creates an empty Immutable list
showHidden: false
}
此外，您的输入未使用您存储的状态：
<input type="checkbox" name="test" onChange={this.toggleShowHidden} value="false" /> <-- The value is being set to false all the time
此逻辑将首先检查isHidden值是否为false。如果是，它将返回该对象作为筛选器的一部分，以便始终显示非隐藏项。对于下一个或部分，我们知道isHidden在这一点上是正确的，因此我们需要检查以过滤并返回结果的唯一逻辑是检查我们是否希望显示隐藏，因此我们可以在or之后使用showHidden状态
另外，为什么要使用immutable存储在状态中，然后在渲染中将其更改为普通javascript对象？您可以访问不可变对象中的属性，而无需将其转换为JS
以下是一个例子：
export default class ZoomerGrid extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
zoomers: Immutable.fromJS([
{
id: 1,
isHidden: false
},
{
id: 2,
isHidden: true
}
]),
showHidden: false
};
}
toggleShowHidden = () => {
this.setState({ showHidden: !this.state.showHidden });
}
render() {
return (
<div>
Show Hidden Zoomers? <input type="checkbox" name="test" onChange={this.toggleShowHidden} value={this.state.showHidden} />
{
this.state.zoomers
.filter(zoomer => !zoomer.get("isHidden") || this.state.showHidden)
.map(zoomer => <ZoomerTile key={zoomer.get("id")} zoomer={zoomer} />)}
</div>
);
}
}
导出默认类ZoomerGrid扩展React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
zoomers:Immutable.fromJS([
{
id:1，
伊希登：错
},
{
id:2，
伊希登：是的
}
]),
showHidden:错误
};
}
toggleShowHidden=（）=>{
this.setState（{showHidden:！this.state.showHidden}）；
}
render（）{
返回(
显示隐藏的缩放器？
{
这是我的州
.filter（zoomer=>！zoomer.get（“isHidden”）| | this.state.showHidden）
.map（缩放器=>）}
);
}
}
谢谢，我现在刚开始加载数据，现在只显示未隐藏的缩放器。谢谢，但是当我单击复选框时，它只会重新加载设置为true的缩放器。我希望看到所有缩放器，真和隐藏，而不仅仅是真。我看到您的showHidden设置总是将其设置为真，您的复选框总是设置为假（您没有将showHidden状态传递到复选框值）。我最近更新了我的答案，包括了我注意到的所有内容，甚至包括了关于如何访问不可变属性而不必将其更改为普通Javascript对象的信息。基于您的评论，我更新了过滤器。它首先检查该值是否未隐藏（false）。如果未隐藏，则立即返回true并返回值。or的下一部分我们知道它是一个隐藏记录，所以我们检查showHidden是否为true（这意味着我们要显示这个隐藏值）。我下面的示例代码shou中的过滤器更新
export default class ZoomerGrid extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
zoomers: Immutable.fromJS([
{
id: 1,
isHidden: false
},
{
id: 2,
isHidden: true
}
]),
showHidden: false
};
}
toggleShowHidden = () => {
this.setState({ showHidden: !this.state.showHidden });
}
render() {
return (
<div>
Show Hidden Zoomers? <input type="checkbox" name="test" onChange={this.toggleShowHidden} value={this.state.showHidden} />
{
this.state.zoomers
.filter(zoomer => !zoomer.get("isHidden") || this.state.showHidden)
.map(zoomer => <ZoomerTile key={zoomer.get("id")} zoomer={zoomer} />)}
</div>
);
}
}