在保存为React状态之前,如何更改JSON对象数组中键的值

时间:2019-10-11 17:13:22

标签: reactjs

enter image description here

我希望能够将profileUrl值从超链接更改为其他字符串。

我需要能够检查和更改6个不同的profileUrl,因为我的剪贴服务正在剪贴6个不同的linkedIn配置文件。

JSON端点: https://phantombuster.s3.amazonaws.com/YRrbtT9qhg0/3jhBGwtSbaEV6lqijSmpoQ/result.json

组件:

// LinkedIn Component Class
export default class LinkedIn extends React.Component<ILinkedInProps, ILinkedInState> {

  // Grabs LinkedIn profiles - This service runs once a day
  private getProfiles() {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/" +
        "https://phantombuster.s3.amazonaws.com/YRrbtT9qhg0/3jhBGwtSbaEV6lqijSmpoQ/result.json"
      )
      .then(response => {
        this.setState({
          profiles: response.data.filter(d=>d.postContent&&d.imgUrl) 
        });
      })
      // Error catching
      .catch(errors => this.setState({ errors, isLoading: false }));
  }

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

过滤后,我们可以根据需要使用map转换数据。 在这里,我们添加了一个新的属性companyName。

我假设您的6家公司位于公司列表中。

export default class LinkedIn extends React.Component<ILinkedInProps, ILinkedInState> {

  companies =  ["https://www.linkedin.com/company/abf-ingredients", "link2", "link3", "link4", "link5", "link6"];

  // Grabs LinkedIn profiles - This service runs once a day
  private getProfiles() {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/" +
        "https://phantombuster.s3.amazonaws.com/YRrbtT9qhg0/3jhBGwtSbaEV6lqijSmpoQ/result.json"
      )
      .then(response => {
        this.setState({
          profiles: response.data.filter(d=>d.postContent&&d.imgUrl && this.companies.includes(d.profileUrl)).map(item => {
            return {
                ...item,
                companyName: this.companies.find(link => link === item.profileUrl )
            }
          }) 
        });
      })
      // Error catching
      .catch(errors => this.setState({ errors, isLoading: false }));
  }

在案件之前和之后我给出的一个项目。

之前:

 {
    "postUrl": "https://www.linkedin.com/feed/update/urn:li:activity:6587985299538759680",
    "action": "Post",
    "postContent": "Today is",
    "imgUrl": "https://media-exp1...",
    "likeCount": 13,
    "commentCount": 3,
    "postDate": "1d",
    "viewCount": "",
    "profileUrl": "https://www.linkedin.com/company/abf-ingredients",
    "timestamp": "2019-10-11T16:00:04.819Z"
  }

之后:

{
  "postUrl": "https://www.linkedin.com/feed/update/urn:li:activity:6587985299538759680",
  "action": "Post",
  "postContent": "Today is ...",
  "imgUrl": "https://media-exp1...",
  "likeCount": 13,
  "commentCount": 3,
  "postDate": "1d",
  "viewCount": "",
  "profileUrl": "https://www.linkedin.com/company/abf-ingredients",
  "timestamp": "2019-10-11T16:00:04.819Z",
  "companyName": "https://www.linkedin.com/company/abf-ingredients"
} 

或者如果您想要所有物品,可以使用此:

    profiles: response.data.filter(d=>d.postContent&&d.imgUrl).map(item => {
            return {
                ...item,
                companyName:   companies.find(link => link === item.profileUrl) ? item.profileUrl: ""
            }
          })