將多個JSON結果呈現給HTML列表中的反應

我想呈現反應（結果）中的JSON對象列表。我的大部分功能都在工作，但是我只能夠顯示一個具有多個條目的列表中的一個HTML JSON對象。（例如：我搜索SMITH，並在控制檯中獲得多個條目，但只有一個條目返回到HTML中）Here's a screenshot of the list that is rendered.將多個JSON結果呈現給HTML列表中的反應

什麼是呈現所有JSON條目列表而不是單個條目的最佳方法？

'use strict'; 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Link} from 'react-router'; 
import {render} from 'react-dom'; 
import login from '../pages/login.js'; 
import store from '../libs/store.js'; 
var jsforce = require('jsforce'); 

class menuScreen extends React.Component { 

constructor(props) { 
    super(props) 

    const data = store.getState(); 

    this.state = { 

     username: '', 
     messages: data.messages 
    } 
} 

handleSearch(e) { 
    this.setState({username: e.target.value}) 
} 

handleChange(evt) { 
    this.setState({ 
     username: evt.target.value.substr(0, 100) 
    }); 

} 

onLinkClicked() { 

    var parent = this.state.username 
    //console.log(this.state.username) 
    var conn = new jsforce.Connection({serverUrl: 'https://cs63.salesforce.com', accessToken: sessionStorage.getItem('token')}) 
    conn.query("SELECT Id, Name, Phone FROM Contact WHERE LastName='" + parent + "'", (err, result) => { 
     if (err) { 
      return console.error(err); 
     } 

     var a = result 

     a.records.forEach((item) => { 
      result = (item.Name + ' ' + item.Phone); 
      this.setState({result: result}); 

     }); 

    }) 
} 

render() { 
    console.log(this.state.result) 
    return (

     <div className='menubox' id='menubox'> 
      <div className='searchbar-container'> 
       <form onSubmit={e => e.preventDefault()}> 
        <input type='text' size='25' placeholder='Contact Last Name' onChange={this.handleChange.bind(this)} value={this.state.username}/> 
        <button type='submit' onClick={this.onLinkClicked.bind(this)}> 
         Search 
        </button> 
       </form> 
      </div> 
      <div dangerouslySetInnerHTML={ { __html: this.state.result } }></div> 
     </div> 

    ) 

} 

} 

export default menuScreen;

來源

2017-04-09 Joseph Sortino

JSON是不是對象，這是一個字符串。 –

你應該停止你正在做的事情，並刪除在瀏覽器中運行SQL代碼的能力。從不在瀏覽器中通過JS運行SQL查詢。任何人都可以在斷點上暫停並編寫自己的SQL查詢來執行。 –

謝謝，是的。目前我正在本地測試。一旦我有一切工作，我打算在我的查詢中擺脫一下。 –

STOP！不要讓瀏覽器訪問您的數據庫。不要讓瀏覽器運行SQL查詢。

conn.query("SELECT Id, Name, Phone FROM Contact WHERE LastName='" + parent + "'", (err, result) => {

如果我在這一行上設置了一個斷點並決定運行我自己的查詢，那就不太好了。現在

conn.query("DROP table Contact")

，隨着中說...您的問題是你永遠只能存儲一個結果來看待

const elems = []; 
a.records.forEach((item) => { 
    result = (item.Name + ' ' + item.Phone); 
    elems.push(result); 
}); 
this.setState({result: elems});

來源

2017-04-09 02:22:16

將多個JSON結果呈現給HTML列表中的反應

回答

相關問題