数据依赖数据，这个在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>
    );
  }
}

效果如下：

补充：数据动态版本

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() {
    // 省略
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.originalData !== this.state.originalData) {
      // 当data发生变化时，执行数据转换的逻辑
      this.transformData();
    }
  }

  transformData() {
    // 省略
  }

  getType(i) {
    // 省略
  }

  changeData = () => {
    // 更改数据
    this.setState((prevState) => ({
      originalData: prevState.originalData.map((item, index) => {
        return { x: item.x + 1, y: item.y + 1, z: item.z + 1 };
      }),
    }));
  };

  render() {
    const { transformedData } = this.state;

    return (
      <div>
        <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>
        <button onClick={this.changeData}>更改数据</button>
      </div>
    );
  }
}