javascript - 数据依赖数据，这个在React中一般如何获得呢？

Question

数据依赖数据，这个一般如何做呢？

比如，在一个react组件内，有一个数组如下：

const datalist = [  {     type: 'a',    location: {x: 0, y: 0, z: 0}  },  {     type: 'b',    location: {x: 1, y: 1, z: 0}  },  {     type: 'c',    location: {x: 2, y: 2, z: 0}  }]

但是基于此数据需要有一个数组只有location：

[    {x: 0, y: 0, z: 0},    {x: 1, y: 1, z: 0},    {x: 2, y: 2, z: 0}]

我们知道在Vue中有computed 这个方式可以做到实时获取，
但是在react中是否有这样的现有的方法做到呢？或者lodash之类的库能做到。

Answer 1

react 很多逻辑都是用原生 js 去实现的

import React, { Component } from 'react';export default class PraseData extends Component {  constructor(props) {    super(props);    this.state = {      originalData: [        { x: 0, y: 0, z: 0 },        { x: 1, y: 1, z: 0 },        { x: 2, y: 2, z: 0 }      ],      transformedData: []    };  }  componentDidMount() {    // 在组件挂载后，进行数据转换    this.transformData();  }  transformData() {    const { originalData } = this.state;    const transformedData = originalData.map((item, index) => ({      type: this.getType(index),      location: { ...item }    }));    this.setState({ transformedData });  }  getType(i) {    // 类型数组没必要响应式，所以直接定义在函数体内就行    const types = ['a','b','c']    return types[x]  }  render() {    const { transformedData } = this.state;    return (      <div>        {transformedData.map((item,index) => (          <div key={index}>            <p>Type: {item.type}</p>            <p>Location: x={item.location.x}, y={item.location.y}, z={item.location.z}</p>          </div>        ))}      </div>    );  }}

效果如下：