Question

我正在尝试访问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>
    );
  }
}

Answer 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

Answer 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>
    );

从状态显示的JSON显示

2 个答案: