如何将React类组件中的方法转换为函数

Question

我正在使用React来构建雷达图。发现此可编辑 source 。但这是在React类中。我需要将其转换为功能组件。

原始类组件：在此处输入链接说明

我尝试转换课程组件到功能组件，但找不到一种转换类中以下两种方法的方法。

  constructor(props) {
    super(props);
    this.state = {
      data: this.processData(characterData),
      maxima: this.getMaxima(characterData)
    };
  }

  getMaxima(data) {
    const groupedData = Object.keys(data[0]).reduce((memo, key) => {
      memo[key] = data.map((d) => d[key]);
      return memo;
    }, {});
    return Object.keys(groupedData).reduce((memo, key) => {
      memo[key] = Math.max(...groupedData[key]);
      return memo;
    }, {});
  }

  processData(data) {
    const maxByGroup = this.getMaxima(data);
    const makeDataArray = (d) => {
      return Object.keys(d).map((key) => {
        return { x: key, y: d[key] / maxByGroup[key] };
      });
    };
    return data.map((datum) => makeDataArray(datum));
  }

这就是我到目前为止尝试的：

    const [data, setData] = useState(characterData);
const [maxima, setMaxima] = useState(characterData);

  setMaxima = (data: any[]) => {
    const groupedData = Object.keys(data[0]).reduce((memo, key) => {
      memo[key] = data.map(d => d[key]);
      return memo;
    }, {});
    return Object.keys(groupedData).reduce((memo, key) => {
      memo[key] = Math.max(...groupedData[key]);
      return memo;
    }, {});
  };

  setData = (data: any[]) => {
    const maxByGroup = setMaxima(data);
    const makeDataArray = (d: { [x: string]: number }) =>
      Object.keys(d).map(key => ({ x: key, y: d[key] / maxByGroup[key] }));
    return data.map(datum => makeDataArray(datum));
  };

有人可以帮助我将这两种方法转换为功能。这里的问题是这些是USESTATE函数的设定方法。

Answer 1

您必须在功能组件中的const中提及功能。尝试下面的尝试，

  const [data, setData] = useState(characterData);
  const [maxima, setMaxima] = useState(characterData);

  const setMaxima1 = (data: any[]) => {
    const groupedData = Object.keys(data[0]).reduce((memo, key) => {
      memo[key] = data.map(d => d[key]);
      return memo;
    }, {});
    setMaxima(value)
    return Object.keys(groupedData).reduce((memo, key) => {
      memo[key] = Math.max(...groupedData[key]);
      return memo;
    }, {});

  };

  const setData1 = (data: any[]) => {
    const maxByGroup = setMaxima(data);
    const makeDataArray = (d: { [x: string]: number }) =>
      Object.keys(d).map(key => ({ x: key, y: d[key] / maxByGroup[key] }));
    setData(Value)
    return data.map(datum => makeDataArray(datum));
  };

Answer 2

最明显的事情是将它们写成常规功能，然后在代码中删除所有此，因为它们已经是相当纯净的函数：

  function MyComponent (props) {
    [data, setData] = useState(processData(characterData));
    [maxima, setMaxima] = useState(getMaxima(characterData));

    function getMaxima (data) {
      const groupedData = Object.keys(data[0]).reduce((memo, key) => {
        memo[key] = data.map((d) => d[key]);
        return memo;
      }, {});
      return Object.keys(groupedData).reduce((memo, key) => {
        memo[key] = Math.max(...groupedData[key]);
        return memo;
      }, {});
    }

    function processData (data) {
      const maxByGroup = getMaxima(data);
      const makeDataArray = (d) => {
        return Object.keys(d).map((key) => {
          return { x: key, y: d[key] / maxByGroup[key] };
        });
      };
      return data.map((datum) => makeDataArray(datum));
    }
  }