从存储在状态中的 JSON 显示答案

【问题标题】：Displaying from JSON stored in state从存储在状态中的 JSON 显示
【发布时间】：2019-04-10 19:55:20
【问题描述】：

我正在尝试访问 API 并提取信息以在我的应用程序中使用。现在，我正在从 SWAPI 获取我想要使用的数据，并且对象以我想要的方式存储在状态中。但是，我无法从保存状态显示 JSON。我确定这很容易，但我无法弄清楚。这是我的代码：

import React, { Component } from 'react';

const APIQuery = 'https://swapi.co/api/';

class Searchbutton extends Component {
  constructor(props) {
    super(props);
    this.state = { value: 'planets/1', data: [] };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  /*Funcionality to handle form and state of form*/
  /* Changes state of value whenever the form is changed, in realtime. */
  handleChange(event) {
    this.setState({ value: event.target.value });
  }
  /* Prevents default formsubmit for now, and logs the state that is saved.*/
  handleSubmit(event) {
    console.log('Be with you, and this was written:' + this.state.data);
    event.preventDefault();
  }

  handleJson(json) {
    JSON.stringify(this.state.data);
  }
  /*Lifecycle method that fetches from API*/
  componentDidMount() {
    fetch(APIQuery + this.state.value)
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <div className="search_wrapper">
        <form onSubmit={this.handleSubmit}>
          <label>
            Search:
            <input
              type="text"
              className="search_bar"
              value={this.state.value}
              onChange={this.handleChange}
            />
          </label>
          <input type="submit" value="May the Force" />
        </form>
        {this.state.data}
        json goes here
      </div>
    );
  }
}

【问题讨论】：

标签： reactjs

【解决方案1】：

您需要先stringify 显示数据。

你有一个方法可以做到这一点，虽然它不返回任何东西，你也永远不会调用它。

所以你可以把它改成

handleJson(json) {
   return JSON.stringify(this.state.data); // added the return statement
}

然后当你想显示它时使用

    {this.handleJson()}
    json goes here

或者你可以在显示之前直接字符串化

    {JSON.stringify(this.state.data)}
    json goes here

【讨论】：

啊，是的，这是正确的。该方法是我早期实验的产物 - 我不敢相信我只是忘记了 return 语句。谢谢！

【解决方案2】：

你可以使用

 <pre>{JSON.stringify(this.state.data)}</pre>

这是一个例子：https://stackblitz.com/edit/react-y8bk6f

我发现的一个很好的替代解决方案是： https://stackoverflow.com/a/35340052/2630817

渲染方法的变化

return (
      <div className="search_wrapper">
        <form onSubmit={this.handleSubmit}>
          <label>
            Search:
            <input
              type="text"
              className="search_bar"
              value={this.state.value}
              onChange={this.handleChange}
            />
          </label>
          <input type="submit" value="May the Force" />
        </form>
        <pre>{JSON.stringify(this.state.data)}</pre>
        json goes here
      </div>
    );

【讨论】：