Question

我是新来的人。

我试图以状态存储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}`,
    }))
  )

Answer 2

代码按书面形式工作。您只需要处理error状态。

当前，当您进行axios调用时出现错误：

{“ config”：{“ transformRequest”：{}，“ transformResponse”：{}，“超时”：0，“ xsrfCookieName”：“ XSRF-TOKEN”，“ xsrfHeaderName”：“ X-XSRF-TOKEN” ，“ maxContentLength”：-1，“标头”：{“ Accept”：“ application / json，文字/纯文字， / “}，”方法“：”获取“，” URL“：” https://www.abenzymes.com/umbraco/api/careers/getcareers?siteid=13930“}，”请求“：{}}

您可以通过将其呈现在h2旁边来查看它：

render() {
const { isLoading, users, error } = this.state;
return (
  <React.Fragment>
    <h2>Random User {JSON.stringify(error)}</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>
  );
 }
}

Answer 3

从控制台：

 Cross-Origin Request Blocked:
 The Same Origin Policy disallows reading the remote resource at   https://www.abenzymes.com/umbraco/api/careers/getcareers?siteid=13930.
 (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

您需要在请求中添加CORS标头，并且还必须在服务器上启用cors。可能有用的链接：

尝试以状态存储json对象数组，然后将项目映射到render

3 个答案: