Question

我试图呈现使用fetch作为表获得的JSON响应，但是我无法将响应数据存储为状态属性。

const url = "http://localhost:8080/api/user/" + this.state.external_id + "/details"
fetch(url, {
        method: 'GET',
        mode: 'cors',
        headers: new Headers({
            "Content-Type": "application/json",
            "Accept": "application/json",
            "Access-Control-Allow-Origin": "*"
        }),
    })
    .then(response => response.json())
    .then((responseText) => {
        console.log(JSON.stringify(responseText));
        this.setState({
            data: JSON.stringify(responseText)
        })
    })
    .then(console.log(this.state))
    .catch(error => {
        console.log("No such User")
    });
}
...

我想做的是获取JSON响应并将其保存在state变量中。如果我可以在将响应数据显示为表格方面获得一些帮助，那将真的很有帮助。

Answer 1

来自MDN：

JSON.stringify（）方法可转换JavaScript对象或值到JSON字符串，如果有替换功能，则可以选择替换值是指定的，或者可以选择仅包括指定的属性，如果指定了替换数组。

Object类型的数据将变成String。

this.setState({ data: JSON.stringify(responseText) })

上方setState像这样：

this.setState({ data: responseText })

JSFiddle 示例：

class Data extends React.Component {
  constructor(props) {
    super(props);
      this.state = {
        data: []
      };
  }
  
  componentDidMount() {
     return fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => {
        this.setState({ data })
      })
      .catch(error => {
        console.error(error);
      });
  }
  
  render() {
    
  return (
     <div>
       <h1>Posts JSON:</h1>
       <pre>
         {JSON.stringify(this.state.data, null, 2)}
       </pre>
     </div>
    );
  }
}

ReactDOM.render(
  <Data />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.9/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.9/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

要添加到Marko Savics答案中，请在render()方法中执行以下操作以将其显示为表格：

return (
  <div>
    <h1>Results Table</h1>
      <table>
        <thead>
          <tr>
            <th>User ID</th>
            <th>ID</th>
            <th>Title</th>
            <th>Body</th>
          </tr>
        </thead>
        <tbody>
          {
            this.state.data.map(item => (
              <tr>
                <td>{item.userId}</tr>
                <td>{item.id}</td>
                <td>{item.title}</td>
                <td>{item.body}</td>
              </tr>
            )
          }
        </tbody> 
      </table>
   </div>
);

关键是要在调用JSON.stringify(responseText)时删除setState，并像这样调用它：

setState({ data: responseText });

渲染Json响应

2 个答案: