Question

这是我的节点状态屏幕截图：

https://gyazo.com/ac8ebbe5989cf1ff80aee5dba4786793

当我像这样映射它时：

  <  {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}

             {showbutton
           ?  <div className="add-btn" onClick={event => this.editProcess(event, node,index)}>+</div>
           :  <p></p>
             }

             {decisionbutton
                 ? <div className="add-btn" onClick={event => this.editProcess(event, node, index)}>+</div>
                 : <p></p>
             }
        <div className="delete-btn" onClick={event=>this.deleteNode(event,node)}>X</div>
      </div>
            )
       })}>

在{node.text}处，我收到以下错误消息：对象作为React Child无效

我尝试过这种方法来克服此问题，但无济于事：

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

Answer 1

您的文本字段具有一个带有内部数组的数组，因此尝试直接渲染该数组会引发错误。修改了您尝试的代码，如下所示，请检查。

 {Array.isArray(node.text) ? node.text.map((child,key)=>{
               return (
                  <div key={key}>
                  {child && child.length > 0 ? child[0].text.join(' ') : ''}
               </div>
            );
         }) : node.text}

对象无效，无法作为React子级

1 个答案: