Todavía aprendo mucho React JavaScript y ahora no puedo entender cómo crear este estado inicial.
En el constructor aquí en el código que quiero agregar al state ejecutando esta línea:
this.state = CsvViewer.parse(props.data); Y directamente después quiero agregar más variables de state como esta:
this.state = { filters: {}, sortColumn: null, sortDirection: null, }; El problema ahora es que el state no contiene la primera llamada a CsvViewer . ¿Cómo puedo agregar para indicar tanto la llamada a CsvViewer como las otras variables de estado?
Código:
class CsvViewer extends Component { static parse(data) { const rows = []; const columns = []; new CSV(data).forEach(array => { if (columns.length < 1) { array.forEach((cell, idx) => { columns.push({ key: `key-${idx}`, name: cell, resizable: true, sortable: true, filterable: true, }); }); } else { const row = {}; array.forEach((cell, idx) => { row[`key-${idx}`] = cell; }); rows.push(row); } }); return { rows, columns }; } constructor(props) { super(); this.state = CsvViewer.parse(props.data); this.state = { filters: {}, sortColumn: null, sortDirection: null, }; } UNSAFE_componentWillReceiveProps(nextProps) { // TODO this.setState(CsvViewer.parse(nextProps.data)); } handleGridSort = (sortColumn, sortDirection) => { // this.setState({ sortColumn, sortDirection }); }; render() { const { rows, columns } = this.state; const { height } = this.props; return ( <ReactDataGrid enableCellAutoFocus={false} columns={columns} rowsCount={rows ? rows.length: 0} rowGetter={i => rows[i]} minHeight={height || 650} onGridSort={this.handleGridSort} /> ); } } export default CsvViewer;Hay algunas opciones para agregar propiedades a un objeto. Este es el que normalmente haría, usando la sintaxis extendida . Creará una copia superficial del objeto devuelto por el análisis y agregará las propiedades adicionales que defina:
this.state = { ...CsvViewer.parse(props.data), filters: {}, sortColumn: null, sortDirection: null, }Object.assign se puede usar para hacer algo similar:
this.state = Object.assign({}, CsvViewer.parse(props.data), { filters: {}, sortColumn: null, sortDirection: null, });O simplemente puede agregar las propiedades individuales una a la vez:
this.state = CsvViewer.parse(props.data); this.state.filters = {}; this.state.sortColumn = null; this.state.sortDirection = null;Puede configurar csvViewer, filtros, sortColumn y sortDirection en un estado como este.
constructor(props) { super(); this.state = { csvViewer: CsvViewer.parse(props.data), filters: {}, sortColumn: null, sortDirection: null, }; }El segundo this.state sobrescribirá su primer this.state, puede tener todo en un solo estado.