Javascript 反应JSON映射数据。尝试从映射函数传递setState变量将无法获取渲染时的最新状态

我正在开发一个React SPA，并尝试使用过滤器呈现JSON数据。我有几个容器，每个容器都有一个类值。单击容器时，我试图将值传递给setState。但是，当退出map函数时，我无法更新新的状态更改

我假设渲染状态没有得到状态的更新

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}来自“React”；
从“./data/list.json”导入ListData；
类级别扩展组件{
建造师（道具）{
超级（道具）；
this.state={newFilter:“”}；
this.onClick=this.setFilter.bind（this）；
}
setFilter=e=>{
console.log（e）；//返回正确的类。
this.setState（{newFilter:e}）；//这不会更新
};
render（）{
console.log（this.state.newFilter）；//这只是返回初始状态“”
const activeTab=this.props.keyNumber；
让levelFilter=ListData.filter（i=>{
返回i.level==activeTab；
});
让renderLevel=levelFilter.map（（细节，i）=>{
让我们简短地描述一下；
如果（（detail.short | |[]）.length==0）{
短_desc=“”；
}否则{
short_desc={detail.short}
；
}
返回(
this.onClick（detail.class）}
值={detail.class}
key={i}
>
{detail.title}
{short_desc}
);
});
console.log（this.state.newFilter）；
返回(
{renderLevel}
);
}
}
导出默认级别；

以下是在组件中调用的代码：

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;

import React，{Component}来自'React'；
从“./components/levels2”导入级别；
进口{
路线,，
导航链接，
哈希路由器
}从“反应路由器dom”；
从“/LevelTwo”导入LevelTwo；
类LevelOne扩展了组件{
render（）{
返回(
)
}
}
导出默认级别1；

编辑：正如注释中所指出的，绑定箭头函数是毫无意义的，但它不会在此处导致错误，因此在代码的其他部分中肯定存在其他问题

问题是您试图绑定的箭头函数没有隐式的

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

  }

---

谢谢特拉维斯。即使有了更新，我仍然返回原始状态。我不确定我是否走上了正确的道路，但我所读到的一切似乎都指向了批量问题。是否有什么原因导致状态无法在渲染时更新？不，我认为您将其过度复杂化了，除非您在某些相关代码中执行了一些您尚未发布的复杂操作。但是，如果您能够在setFilter函数中看到正确的对象，那么当您调用setState时，它将相应地更新您的状态。请尝试此。。this.setfilter=this.setfilter.bind（此）我已更新以添加其他文件。我仍然无法返回到渲染。也许里面有我没有正确编码的东西？好的，谢谢你澄清。我将更新我的答案以反映这一点。目前还不清楚问题是什么。您正在记录

this.props.newFilter

这是一个从未设置过的道具！？但是您也在记录

this.state.newFilter

，它应该在渲染中正确更新。谢谢您的帮助。我更新了上面的状态，而不是道具。在我感到沮丧的某个地方，我更新了以尝试不同的方式，但忘记了切换console.log。虽然您更新了代码，但问题描述仍然不清楚问题是什么？我将更新。我有基于JSON文件中的数据加载的Div。它们每个都有一个类，我想将其作为过滤器传递。单击div时，该类将传递给setFilter函数，但不会在渲染中更新。我正在尝试传递一个变量，以便根据选择筛选出结果。