反应 JSON 映射数据。 尝试从映射函数传递 setState 变量不会在渲染时获得最新状态

Question

I'm working on a React SPA and trying to render JSON data with a filter. I have several containers that each have a class value. When clicking on a container, I am trying to pass a value to a setState. When stepping out of the map function, however, I cannot get the new state change to update.

I'm assuming that the render state isn't getting updated for the state.

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;

Here is the code calling in the Component:

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;

Answer 1

Edit: As pointed out in the comments, binding an arrow function is pointless but it wouldn't cause the error here, so there must be something else going on in some other part of your code.

The problem is you are trying to bind an arrow function that doesn't have an implicit this . Either call setFilter directly (no need to bind this with arrow functions) or change your setFilter function to a regular function:

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

  }