Невозможно зацикливаться в реакции JS

Question

Я пытаюсь сделать простой цикл с использованием .map, но не получаю ожидаемый результат.Вот мой код -

const filters = [this.state.filterAttributes ] //[Part Number, Product Line]

<tr key = {key}>

    {filters.map((k) => {

        return <th>{k}</th>
    })}

    <td>{item.PartNumber}</td>
    <td>{item.productline}</td>
</tr>

th{k} возвращается как <th>Part NumberProduct Line</th> вместо

<th>Part Number</th>
<th>Product Line</th>

Может ли кто-нибудь помочь, пожалуйста?

Answer 1

Это происходит из-за следующей строки:

const filters = [this.state.filterAttributes] //[Part Number, Product Line]

Теперь filters будет иметь следующее значение:

[[this.state.filterAttributes]]

const a = ['Part Number', 'Product Line']
const filters = [a]

console.log(filters)

То, что вы пытались сделать для копирования массива, должно быть следующим, используя оператор деконструкции:

const filters = [...this.state.filterAttributes]

const a = ['Part Number', 'Product Line']
const filters = [...a]

console.log(filters)

Кроме того, вот более короткий синтаксис для вашего map рендеринга:

{filters.map(k => <th key={k}>{k}</th>)} //Do not forget the key

Вы также можете извлечь значение из вашего состояния вместокопирование его с помощью деконструкции:

const { filterAttributes } = this.state

<tr key={key}>

    {filterAttribute.map(k => <th key={k}>{k}</th>)}

    <td>{item.PartNumber}</td>
    <td>{item.productline}</td>
</tr>