REACTJS

Question

我尝试从 Web 服务 api（通过 JSON）获取数组数据并遍历响应 - 但是当尝试 console.log() 来自渲染的状态数据时()，我收到此错误：

TypeError:this.state.jsonStr is undefined.

class TextFields extends React.Component {

  constructor() {
    super();
    this.state = {
    }
  };

  componentDidMount() {
    const apiURL = myConstClass.apiURL;
    var apiURL_ = apiURL + '/searchIdea';

    fetch(apiURL_, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        // SEND 
        idea_uniqueid: '',
        idea_name: '',
        idea_description: '', // FIX: Get from Querystring 
      })
    }).then((Response) => Response.json()).then((findresponse) => {
      // RESPONSE   
      this.setState({ jsonStr: findresponse, });
      console.log("SEARCHIDEARESULTS"); // Stopped here - Loop through array and populate below
      console.log(this.state.jsonStr);

    })
  }


  // RENDER
  // ---------------------------------------------------------------

  render() {

    const { classes } = this.props;
    const dataStr = this.state.jsonStr;
    console.log("RENDER"); // Stopped here - Loop through array and populate below
    console.log(this.state.jsonStr);
    console.log(this.state.jsonStr[0]);

    return (
      <div></div>
    )

  }
}

Answer 1

看起来您在定义 this.state.jsonStr 之前试图访问它，结果您收到错误：

TypeError:this.state.jsonStr is undefined.

尝试在构造函数中设置它：

  constructor() {
    super();
    this.state = {
      jsonStr: ''
    }
  };

Answer 2

请尝试修改后的代码：

render() {

    const { classes } = this.props;
    const dataStr = this.state.jsonStr ? this.state.jsonStr : ""  ;// I made a change here
    console.log("RENDER"); // Stopped here - Loop through array and populate below
    console.log(dataStr);


    return (
      <div></div>
    )

  }
}

Answer 3

最初 this.state.jsonStr 将是未定义的。所以当执行render()方法时this.state.jsonStr[0]会抛出错误。

尝试将 console.log(this.state.jsonStr[0]); 更改为 console.log(this.state.jsonStr && this.state.jsonStr[0]);

Answer 4

发生这种情况是因为第一次渲染组件时，fetch 返回的 promise 尚未解决，因此在状态中找不到 jsonStr。要解决此问题，请将 jsonStr 添加到初始状态并为其分配一个值

TextFields extends React.Component {
    constructor() {
      super();
      this.state = {
         jsonStr: ''
      }
    }
}

否则你也可以添加条件来检查是否设置了 jsonStr

TextFields extends React.Component {

 constructor() {
     super();
     this.state = {
       jsonStr: undefined
     }
 }

 render() {

        const { classes } = this.props;
        const dataStr = this.state.jsonStr;
        console.log("RENDER");
        if (this.state.jsonStr) {
            console.log(this.state.jsonStr);
            console.log(this.state.jsonStr[0]);
        }
        return (
          <div></div>
        )

      }
    }

}

Answer 5

大部分答案都涉及 default 状态值或 render 中的错误。但是我在你的数据获取函数中看到了另一个错误。

来自 official documentation：

Calls to setState are asynchronous - don’t rely on this.state to reflect the new value immediately after calling setState.

在您的 componentDidMount 方法中，您犯了以下错误：

this.setState({ jsonStr: findresponse, });
console.log("SEARCHIDEARESULTS"); // Stopped here - Loop through array and populate below
console.log(this.state.jsonStr);

如果你想调试，我强烈推荐 devTools 扩展，或者将你的 console.log 语句作为对 setState 的回调或在 componentDidUpdate 生命周期中。

关于您的渲染方法的建议的一些注意事项，请考虑您的组件状态。对于 e.x。如果从外部服务获取数据，你可能有以下状态：

加载中
错误
未找到数据
找到数据

当您执行以下操作时：const dataStr = this.state.jsonStr ? this.state.jsonStr : ""，您可能无法区分这些状态。

我建议使状态状态明确（有很多技术，为了简洁起见，我将它们排除在外），但至少我会建议智能默认值。对于 e.x.:

constructor() {
    super();
    this.state = {
       jsonStr : undefined
    }
  };

您的 api 调用将是 return 值、null 或空数组（如果它是数组）。也可能会抛出一个错误，您可以使用 componentDidCatch 捕获该错误。

您现在可以在渲染方法中轻松处理这些情况。

REACTJS - 获取状态变量的类型错误

REACTJS - Getting a TypeError for state variable

arrays

rest

json

session-state