ReferenceError：找不到变量：状态答案

【问题标题】：ReferenceError: Can't find variable: stateReferenceError：找不到变量：状态
【发布时间】：2020-10-20 03:02:48
【问题描述】：

我正在录制一个记录锻炼日志的应用程序。如果我点击该区域，我想在屏幕上显示与该区域相对应的项目。

import React, { Component } from "react";
import {
  TouchableOpacity,
  StyleSheet,
  Text,
  View,
  FlatList,
} from "react-native";

let clickmenu = "";

class TouchableText extends Component {
  render() {
    clickmenu = this.props.children.item;
    return (
      <TouchableOpacity style={styles.text} onPress={this.props.press}>
        <Text style={styles.text}>{this.props.children.item.toString()}</Text>
      </TouchableOpacity>
    );
  }
}
class Detail extends Component {
  state = {
    data: {
      chest: [
        "플랫 벤치프레스",
        "인클라인 벤치프레스",
        "케이블 크로스오버",
        "푸쉬업",
        "딥스",
      ],
      back: ["바벨로우", "데드리프트", "턱걸이", "씨티드 로우", "렛풀 다운"],
    },
    menu: [
      "chest",
      "back",
      "legs",
      "shoulder",
      "biceps",
      "triceps",
      "abs",
      "etc..",
    ],
    isclicked: true,
  };
  press = () => {
    this.setState({
      isclicked: false,
    });
  };
  render() {
    const { data, menu, isclicked } = this.state;
    return isclicked ? (
      <View style={styles.container}>
        <FlatList
          data={this.state.menu.map((mp) => {
            return mp;
          })}
          renderItem={(item) => (
            <TouchableText press={this.press}>{item}</TouchableText>
          )}
        />
      </View>
    ) : (
      <View>
        {" "}
        {(function () {
          console.log(this);
          if (clickmenu == "가슴") {
            <FlatList
              data={this.state.data.가슴.map((mp) => {
                return mp;
              })}
              renderItem={(item) => <TouchableText>{item}</TouchableText>}
              keyExtractor={(item, index) => index.toString()}
            />;
          } else if (state.clickmenu == "등") {
            <FlatList
              data={this.state.data.등.map((mp) => {
                return mp;
              })}
              renderItem={(item) => <TouchableText>{item}</TouchableText>}
            />;
          } else {
            console.log("world");
          }
        })()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black",
  },
  text: { flex: 1, backgroundColor: "white", fontSize: 36, color: "black" },
});

export default Detail;

如果我点击胸部按钮，会出现以下错误：函数（）{如果（）{}} 这是否意味着课程详细信息？我该如何解决这个问题？

【问题讨论】：

setState 不会更改您的 state 对象。您需要在构造函数中进行设置。谷歌应该很容易。

标签： javascript reactjs react-native

【解决方案1】：

您缺少this。

改变

} else if (state.clickmenu == "등") {

到

} else if (this.state.clickmenu == "등") {

【讨论】：

【解决方案2】：

您需要在其中设置一个包含状态属性的构造函数：

class Detail extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
      stateAttributesHere: "",
    };
  }
  ...
  ...
}

【讨论】：

【解决方案3】：

else if (state.clickmenu == "등") => else if (clickmenu == "등")

【讨论】：