javascript - 反应 JSON 映射数据。尝试从映射函数传递 setState 变量将不会在渲染时获得最新状态
问题描述
我正在研究 React SPA 并尝试使用过滤器呈现 JSON 数据。我有几个容器,每个容器都有一个类值。单击容器时,我试图将值传递给 setState。但是,当退出地图功能时,我无法更新新的状态更改。
我假设渲染状态没有针对该状态进行更新。
import React, { Component } from "react";
import ListData from "../data/list.json";
class Levels extends Component {
constructor(props) {
super(props);
this.state = { newFilter: "" };
this.onClick = this.setFilter.bind(this);
}
setFilter = e => {
console.log(e); //This returns the correct class.
this.setState({ newFilter: e }); //This will not update
};
render() {
console.log(this.state.newFilter); //This just returns the initial state of ''
const activeTab = this.props.keyNumber;
let levelFilter = ListData.filter(i => {
return i.level === activeTab;
});
let renderLevel = levelFilter.map((detail, i) => {
let short_desc;
if ((detail.short || []).length === 0) {
short_desc = "";
} else {
short_desc = <p>{detail.short}</p>;
}
return (
<div
className={`kr_sItem ${detail.class}`}
data-value={detail.class}
onClick={() => this.onClick(detail.class)}
value={detail.class}
key={i}
>
<h1>{detail.title}</h1>
{short_desc}
<img src={`${detail.img}`} />
</div>
);
});
console.log(this.state.newFilter);
return (
<div id="kr_app_wrapper">
<div id="lOneWrapper">{renderLevel}</div>
<div id="lTwoWrapper"></div>
</div>
);
}
}
export default Levels;
这是组件中调用的代码:
import React, {Component} from 'react';
import Levels from './components/levels2';
import {
Route,
NavLink,
HashRouter
} from "react-router-dom";
import LevelTwo from "./levelTwo";
class LevelOne extends Component{
render(){
return(
<div id="lOneWrapper">
<NavLink to='/Level2'><Levels keyNumber={1} /></NavLink>
</div>
)
}
}
export default LevelOne;
解决方案
编辑:正如评论中指出的那样,绑定箭头函数是没有意义的,但它不会在这里导致错误,所以在你的代码的其他部分必须有其他事情发生。
问题是你试图绑定一个没有隐式的箭头函数this
。直接调用setFilter
(无需this
与箭头函数绑定)或将setFilter
函数更改为常规函数:
class Levels extends Component{
constructor(props){
super(props);
this.state = {newFilter: ''};
this.onClick = this.setFilter.bind(this);
}
setFilter(e) {
console.log(e); //This returns the correct class.
this.setState({newFilter: e}); //This will not update
}
推荐阅读
- ios - 如何在没有故事板的容器视图中打开视图控制器
- python - Python烧瓶TypeError:不支持的操作数类型|:'bool'和'BinaryExpression'
- html - 我从我们的书中复制了这段代码,但它不起作用
- php - UNION ALL 不回显附加文本
- go - 将数组索引传递给模板
- javascript - 如何使用正则表达式解析 Ajax/Jquery 响应数据?
- c# - 创建一个小地图但是如何使原始面板和小地图面板的坐标相互同步?
- javascript - 如何将数据从我的节点脚本发送到客户端脚本中的函数
- angular - 试图为嵌入目的抓取站点数据而 CORS 会妨碍您吗?
- c# - 并行处理是否有助于在 c# 中更快地执行 async-await 代码?