Ошибка типа: (node.text || []).map не является функцией

#reactjs

Вопрос:

Это конечный результат, который я получил в состоянии отображения я хочу отобразить текстовый массив внутри состояния узла пожалуйста, игнорируйте nodes const это результат, который я получил в console.log(this.state.nodes);

      `const nodes = [{
             id: 1,
             style: 'dummy data',
             className: 'dummy data',
             text: [
              { id: 1, text: 'text 1'},
              { id: 2, text: 'text 2'}
             ]
           }]`

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

    `{this.state.nodes.map((node, index) => {
            const showbutton = node.className === 'square';
            const decisionbutton = node.className === 'diamond';

     return(
      <div
             key={index}
             className={'node '   node.className}
             id={node.id}
             ref={nodes => this.refs.nodes[index] = nodes}
             style={node.style}
             onClick={this.activeElem}

         >
           {(node.text|| []).map((child,key)=>{
             return (
                <div key={key}>
                {child.text}
                </div>
             );
           })}`

1. что такое node.text ?

2. это одна из его state переменных

3. да, это моя переменная внутри состояния узлов

4. позвольте мне показать вам консоль моего состояния

5. да, это массив внутри состояния узла

Ответ №1:

У меня также была такая же проблема map внутри HTML-кода rxjs, вот моя работа над этим…

  return(
      <div
             key={index}
             className={'node '   node.className}
             id={node.id}
             ref={nodes => this.refs.nodes[index] = nodes}
             style={node.style}
             onClick={this.activeElem}

         >
           {Array.from(Array(node.text.length), (e, i) => {
                return (
                        <div key={key}>
                         {node.text[i].text}
                        </div>
                       )
           }
      </div>
)

посмотрите, поможет ли это.
Я просто создаю временный пустой массив и использую его индекс для итерации по node.text массиву

1. проверьте это, братан, это дает мне неопределенный

2. Это мой код для сопоставления узлов и текста ` {this.state.nodes.map((узел, индекс) => { {Array.from(Array(node.text.length), (e, i) => { return ( <div key={i}>{console.log(node.text[i].text)} {node.text[i].text} </div> ) })}`

3. Если у вас есть три элемента в node.text, получаете ли вы undefined 3 раза на консоли?

4. @SASSY_ROG Проблема действительно применяется map() к объекту javasript.

Ответ №2:

Проблема в том, что первая переменная в условии (node.text || []) на самом деле не является an Array .

Когда вы попытались утешить его, он показал вам [object][object] . который является Object типом данных JS — И map() , является функцией, которая существует в Array.prototype .

Когда вы console.log(JSON.stringify(node.text)) это сделали, он показал вам текст, как указано.

.map() также не будет работать undefined .

Это причина сбоя. node.text не является массивом.

Если вы возвращаете объект, рассмотрите возможность использования Object.keys (info) для перебора его, или for...of цикла, или просто переформатирования node.text , чтобы иметь тип array .

1. Да, я понимаю проблему, но я все еще пытаюсь понять, как я могу показать это в узлах

2. @Asad Измените объект на массив (манипулируйте им до прибытия в эту точку сопоставления) или измените вашу функцию map на функцию, которая имеет дело с объектами.

Ответ №3:

 const nodes = [{
             id: 1,
             style: 'dummy data',
             className: 'dummy data',
             text: [
              { id: 1, text: 'text 1'},
              { id: 2, text: 'text 2'}
             ]
           }]

node.map((node) => { return node.text.map((value) => (value.id)); })

выполняя это, он возвращает допустимые значения… просто убедитесь, что node.text имеет объект в качестве значений, а не строку, как показано на скриншоте