如何解析反应对象的属性答案

【问题标题】：How to parse a property of a react object如何解析反应对象的属性
【发布时间】：2022-11-26 03:58:23
【问题描述】：

我正在 React 工作并有一个 resonse (ReviewerService.getReviewers()) 返回一个值数组：

0: {id: 1, firstName: 'John', lastName: 'Doe', email: 'johndoe@aol.com', responses: '{"q1":"yes","q2":"no","q3":"yes","rating":4}'}

1: {id: 2, firstName: 'bob', lastName: 'jefferson', email: 'bob@aol.com', responses: '{"q1":"bob","q2":"yes","q3":"yes","rating":5}'}.

如果this.state = { reviewers: [] }。

我如何将响应数据传递给审阅者并同时解析响应属性？因此，我可以轻松访问响应的这些属性。

class ListReviewsComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      reviewers: [],
    };
  }

  async componentDidMount() {
    await ReviewerService.getReviewers().then((res) => {
      this.setState({ reviewers: res.data });
    });

  this.setState({ reviewers.responses: JSON.parse(this.state.reviewers.responses)}); // error
 
  }

【问题讨论】：

this.state.reviewers，是一个数组，JS中的数组没有responses属性，所以this.state.reviewers.responses绝对是一个bug。你得到了什么错误，你实际上试图在 reviewers 数组中存储什么？请将此包含在您的问题中。
审稿人 = [ {id: 1, firstName: 'John', lastName: 'Doe', email: 'johndoe@aol.com', responses: '{"q1":"yes","q2":"no", "q3":"yes","rating":4}'}, {id: 2, firstName: 'bob', lastName: 'jefferson', email: 'bob@aol.com', responses: '{"q1 ":"bob","q2":"yes","q3":"yes","rating":5}'}] ------------ 我如何解析响应属性以便它不再是每个数组的字符串？

标签： javascript reactjs arrays json object

【解决方案1】：

我认为你返回的数组

ReviewerService.getReviewers()

应该是json格式，经过处理或解析，之前在setState中设置：
data = [ {id: 1, firstName: 'John', lastName: 'Doe', email: 'johndoe@aol.com', responses: '{"q1":"yes","q2":"no","q3":"yes","rating":4}'}
        ,{id: 2, firstName: 'bob', lastName: 'jefferson', email: 'bob@aol.com', responses: '{"q1":"bob","q2":"yes","q3":"yes","rating":5}'} ];
然后你这样做，把数组放在一个 json 处理的对象格式中
async componentDidMount() {
await ReviewerService.getReviewers().then((res) => {
  this.setState({ reviewers: res.data });
});
当你这样做时：
this.setState({ reviewers: res.data });
您放置在 this.state.reviewers 上，所有列表和嵌套的所有对象。

您可以像下面的方法一样访问此组件上的 this.state：
getResponsesOfReviewersOnArrayByIndex = (index) => {
    return this.state.reviewers[index].responses
}
或者只是在一些方法访问中，
this.state.reviewers[i].firstName
你可以试试这个来更好地理解 JSON 解析函数：
const reviewersData = '[{"name":"neymar"}, {"name":"junior"}]';
const reviewers = JSON.parse(reviewersData);

console.log(reviewers[0].name);
在这个W3Schools可以看到更多JSON.parse()的例子

希望这可以帮助。

【讨论】：