ReactJS удаляет один тд из массива при использовании array.map

Question

Мы создаем веб-приложение, которое будет обрабатывать файлы с FTP-клиента.В настоящее время у нас есть фиктивный «файл», над которым мы работаем.

У меня есть один компонент (пожалуйста, исправьте меня, если моя терминология неверна), который создает макет таблицы и выглядит следующим образом.

render() {
    return (
                <tr>
                    <td>{this.fileData.dataTypeString}</td>
                    <td>{dateFormat(this.fileData.creationDate, "mm/dd/yyyy HH:MM tt")}</td>
                    <td>{this.fileData.value}</td>
                    <td >{this.fileData.origin}</td>
                    <td>{<a href=''><strong> Delete </strong></a>}</td>
                </tr>

Затем он вызывается из другого компонента с использованием array.map для чего-то вроде

<tbody>
                    {array.map(data =>
                        <SupportSummaryDataRow key={data.fileid} fileData={data} />)} 
                </tbody>

Так что моя проблема заключается в следующем.Ссылка на удаление (которая пока никуда не идет, да) должна присутствовать только на одном из компонентов.Я хотел бы использовать компонент SupportSummaryDataRow для загрузки массива для 3 различных компонентов, хотя ... Есть один, что мне нужно только 2 элемента из вспомогательного компонента, и для этого я взял входящий массив и пропустил его через другой массив, отфильтровав еговниз, чтобы вытащить только 2 предмета, которые мне нужны.Затем в файле array.map я просто использовал «новый» массив ... который работал.

Однако удаление теперь сохраняется во всех из них.Я верю, что это потому, что он не читается из файла.Но как мне спрятать или удалить его там, где он мне не нужен?

У меня есть опции чтения по использованию CSS для обработки isHidden и тому подобное, и я могу пойти по этому пути, если потребуется.Но если есть лучший способ, я бы хотел его изучить.

Спасибо.

Answer 1

Я надеюсь, что правильно истолковал ваш вопрос.В моем случае я добавлю еще одну опору с именем «delete»

const array = [{fieldid: 1, delete: true}, {fieldid: 2, delete: false}, {fieldid: 3, delete: false}];

<tbody>
                {array.map(data =>
                    <SupportSummaryDataRow key={data.fileid} fileData={data} delete={data.delete}/>)} 
            </tbody>

И в ваш дочерний компонент SupportSummaryDataRow с помощью оператора &&:

render() {
return (
            <tr>
                <td>{this.fileData.dataTypeString}</td>
                <td>{dateFormat(this.fileData.creationDate, "mm/dd/yyyy HH:MM tt")}</td>
                <td>{this.fileData.value}</td>
                <td >{this.fileData.origin}</td>
                {this.props.delete && (
                <td>{<a href=''><strong> Delete </strong></a>}</td>
                )}

            </tr>
        )}

Answer 2

Вы также можете сделать ссылку удаления условно:

Шаг 1: Выясните, следует ли отображать ссылку удаления или нет.Это может быть основано на данных, или каждый из родительских компонентов может просто установить для него значение true / false, если они знают, следует ли отображать его или нет.

const shouldRenderDelete = ... // some logic to figure out true/false

Шаг 2: Передайте этот флаг SupportSummaryDataRow

<SupportSummaryDataRow key={data.fileid} fileData={data} shouldRenderDelete={shouldRenderDelete} />

Шаг 3: Сделать рендеринг удаления условным на основании shouldRenderDelete

<tr>
    <td>{this.fileData.dataTypeString}</td>
    <td>{dateFormat(this.fileData.creationDate, "mm/dd/yyyy HH:MM tt")}</td>
    <td>{this.fileData.value}</td>
    <td >{this.fileData.origin}</td>
    <td>{shouldRenderDelete && (<a href=''><strong> Delete </strong></a>)}</td>
</tr>