Estoy usando reaccionar para construir un gráfico de radar. Encontré estafuente editable. Pero está en los componentes de la clase de reacción. Necesito convertirlo en componentes funcionales.
Componente de clase original:ingrese la descripción del enlace aquí
Intenté convertir el componente de la clase en un componente funcional, pero no pude encontrar la manera de convertir los siguientes dos métodos en la clase.
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)); }Esto es lo que he probado hasta ahora:
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)); };¿Puede alguien ayudarme a convertir estos dos métodos en funciones? El problema aquí es que estos son los métodos establecidos de las funciones useState.
Tienes que mencionar las funciones en const en componentes funcionales. Prueba como a continuación,
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)); };Lo más obvio es escribirlas como funciones regulares y eliminar todo this en el código porque ya son funciones bastante puras:
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)); } }