Вставка таблицы материалов более одной строки

#javascript #reactjs #material-table

#javascript #reactjs #материал-таблица

Вопрос:

Я пытаюсь добавить более одной строки в таблицу mat, поэтому у меня есть поле, в котором пользователь вводит число, например: «2»

затем я спрашиваю, хочет ли он представить его как одну строку или отдельно, если все находится в одной строке, все в порядке, но когда я пытаюсь добавить отдельно, он ломается и вводит только одну строку вместо числа, написанного

затем выполните цикл для и setData() внутри for

 const [data, setData] = useState([]);
const json = {
    id: id,
    name: null,
};

const newArr3 = [];
for (let index = 0; index < number; index  ) {
    newArr3.push(json);
    postRequest(json);
    setData(newArr3);
}

<MaterialTable
    columns={columns}
    data={data}
    title="Table 2"
    options={{
        exportButton: true,
        filtering: true,
        actionsColumnIndex: -1,
        headerStyle: {
            backgroundColor: '#01579b',
            color: '#FFF'
        },
        rowStyle: {
            backgroundColor: '#EEEEEE',
        }
    }}
/>

Я видел у разработчика components react tools, что он вводит 2 объекта внутри массива data , но отображает только один, возможно, потому, что он имеет то же tabledata {id:0} самое, когда это было бы: tabledata {id:0} и tabledata {id:1} но я не знаю, как это сделать.

Заранее спасибо

1. Проблема может заключаться в том, что вы помещаете точный объект json в качестве ссылки в свой массив. Таким образом, в основном вы добавляете number один и тот же объект. Чтобы изменить идентификатор, одновременно вставляя копию в массив, вы можете попробовать: newArr3.push({...json, id: index})

2. какое значение number ? существует вероятность, что вы на самом деле просто добавляете данные один раз. Кроме того, столбцы неизвестны, логика выглядит нормально, но сначала зарегистрируйте данные и убедитесь, что в них больше одного элемента

3. @IsaacSekamatte number = 2 тогда он добавляет только одну строку, я имею в виду одну строку

4. @TimDithmer я уже пробовал ее деструктурировать и даже добавить newArr3.push({…json, tableData:{id:index}}), и он по-прежнему отображает только один скриншот строки

5. newArr3.push({...json, tableData:{id:index}}) создал бы объект, выглядящий следующим образом: {id: id, name: null, tableData: {id: 1}} для index = 1 . Вы пробовали это в точности так, как я написал?

Ответ №1:

Попробуйте указать index for цикл как id .

 const newArr3 = [];
for (let index = 0; index < number; index  ) {
    const json = {
        id: index,
        name: null
    }
    newArr3.push(json);
    postRequest(json);
    setData(newArr3);
}

1.скриншот 1 таблица, отображающая одну строку скриншот 2 информация о массиве

2. Если я закрою модальный файл без обновления (F5) и снова открою его, поскольку он сохранен в состоянии, он показывает 2 строки, но не в начале