javascript - 尝试将 json 对象数组存储在状态中，然后将项目映射到渲染中

Question

我是 React 新手。

我试图在状态中存储 json 对象数组，然后将项目映射到组件渲染中。

我也不确定如何调试这个/没有控制台错误:/

https://codepen.io/bkdigital/pen/XWrLrxX?editors=1111

class App extends React.Component {
state = {
   users: [],
   isLoading: true,
   errors: null
};

getUsers() { 
axios.get("REMOVED")
  .then(response =>
    response.data.results.map(user => ({
      name: `${user.Id}`,
      Company: `${user.Company}`,
    }))
  )
  .then(users => {
    this.setState({
      users,
      isLoading: false
    });
  })
  .catch(error => this.setState({ error, isLoading: false }));
}

componentDidMount() {
   this.getUsers();
}

render() {
const { isLoading, users } = this.state;
return (
  <React.Fragment>
    <h2>Random User</h2>
    <div>
      {!isLoading ? (
        users.map(user => {
          const { Company, Id } = user;
          return (
            <div key={Id}>
              <p>{Company}</p>
              <hr />
            </div>
          );
        })
      ) : (
        <p>Loading...</p>
      )}
    </div>
  </React.Fragment>
  );
 }
} 

ReactDOM.render(<App />, document.getElementById("root"));

应呈现公司名称。

Answer 1

您的代码看起来不错。我认为，您没有获得预期的数据。请尝试记录您的回复。

替换这段代码:

.then(response =>
    response.data.results.map(user => ({
      name: `${user.Id}`,
      Company: `${user.Company}`,
    }))
  )

与

.then(response => {
    console.log(response);
    return response.data.results.map(user => ({
      name: `${user.Id}`,
      Company: `${user.Company}`,
    }))
  })

并检查控制台中的响应对象。

更新

您的代码应该如下所示(当 CORS 插件打开或您的服务器和客户端设置为没有 CORS 错误时):

.then(response => 
  response.data.map(user => ({
      name: `${user.Id}`,
      Company: `${user.Company}`,
    }))
  )