如何将字符串转换为 JSON 对象并在反应组件中显示？

Question

我对 React 和 Javascript 非常陌生。我正在使用 React 和 Nodejs 创建一个简单的搜索功能，您可以在其中搜索导师。我正在尝试使用 react 打印搜索的输出。我的快递服务器以字符串的形式发送响应。如下所示：

'[{"tutorID":1,"email":"johndoe@sfsu.edu","firstName":"John","lastName":"Doe","courseTeaching":"csc510","imageReference ":" http://localhost:3001/john.png "}]'

我希望能够以表格的形式显示每个键及其值。有人可以帮我实现吗？

我在 react 中的搜索代码如下：

import React, {useState} from 'react';
import "./SearchForm.css"; 
import SearchIcon from '@mui/icons-material/Search';
import DisplayResults from './DisplayResults.js'; 


class SearchForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedCategory: '',
            textSearch: '',
            searchResponse: []
        };

        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleInputChange(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        this.setState( {
            ...this.state,
            [target.name]: value
        });
    }

    handleSubmit(event) {
        event.preventDefault(); 
        let cat = this.state.selectedCategory;
        let searchquery = this.state.textSearch; 

        fetch(`http://localhost:3000/onSubmit?param1=${cat}&param2=${searchquery}`, {
            method: "GET",
            headers: {
                'Content-type': 'application/json'
            }
        })
        .then((result, err) => result.json())
        .then(contents => {
            this.setState({ searchResponse: contents}, function() {
                console.log(this.state.searchResponse);
            })
        });
    }

    render() {
        return (
            <>
            <p className="greeting">Hi, what would you like to search?</p>
            <form onSubmit={this.handleSubmit}>
                
            <div className="wrapper">

               <select class="theme" 
                name="selectedCategory"
                type="category"
                value={this.state.selectedCategory} 
                onChange={this.handleInputChange}>
                    <option value="all">Search All</option>
                    <option value="tutors">Tutors</option>
                    <option value="Courses">Courses</option>
                </select>
    
                <input className="searchBar" 
                name="textSearch" 
                type="text" 
                placeholder="search"
                value={this.state.textSearch}
                onChange={this.handleInputChange}>
                </input> 
                    

                <div className="searchIcon">       
                    <SearchIcon onClick={this.handleSubmit}/>
                </div>
            </div>

            </form>

            <DisplayResults searchResults={this.state.searchResponse}/>
        </>
        )
    }
}

export default SearchForm;

DisplayResults 的代码如下：

import React from 'react'; 

class DisplayResults extends React.Component {

    render() {
        return ( 
                <div>{this.props.searchResults}</div>
        ); 
    }
}

export default DisplayResults; 

任何帮助将不胜感激，谢谢。

Answer 1

如果响应是 JSON，您可以使用 .map 属性。

在此示例中，我从您的数据集中省略了“ ”（在开头和结尾），以使其成为有效的 json。

let object = [{
"tutorID": 1,
"email": "johndoe@sfsu.edu",
"firstName": "John",
"lastName": "Doe",
"courseTeaching": "csc510",
"imageReference": " http://localhost:3001/john.png "
}]

所以你可能可以做这样的事情来访问这些值。

const listItems = object.map((object) => console.log(object.tutorID))

所以使用 .map 你可以返回一个包含数据的组件，你刚刚映射。

因此，在此之后，您要如何处理数据取决于您。所以你可以创建一个表，或者使用 Bootstrap 中的一个或类似的东西，然后将值映射出来。

<Table>
<p>{object.tutorID}</p>
<p>{object.email}</p>
<p>{object.firstName}</p>
<p>{object.lastName}</p>
...
</Table>

如果我说错了，或者我没有给你想要的答案，请告诉我。

Answer 2

1. [Inside SearchForm] 收到响应后，让我们将您的字符串数据变成可用的东西。使用将您的字符串解析为对象数组 JSON.parse(YOUR_DATA)。然后，您可以将您的 searchResponse 状态设置为此数组。
2. [Inside DisplayResults] 你有一个对象数组，所以使用YOUR_DATA.map() 遍历它们。你的 map 函数应该返回一些 JSX。在这种情况下，您正在制作一张桌子。 这是一个创建表的函数。 我们使用Object.values(YOUR_OBJECT) 获取所有值（例如John, Doe ...）和Object.keys(YOUR_OBJECT) 获取密钥（例如firstName, lastName）。 您可以在 render() 函数中使用类似的东西来创建表。

    const createTable = () => {
        const tableHeaders = (  // Get the table headers from the first person, OR enter them manually.
            <tr>
                {Object.keys(this.props.searchResults[0]).map(headerTitle => <th>{headerTitle}</th>)}
            </tr>
        );
        // All the content rows of the table.
        const tableRows = this.props.searchResults.map((tutor) => (
            <tr> {/* this is one row of the table. It is filled with td's which each have a piece of information about the tutor. */}
                {Object.values(tutor).map(value => ( // for each of the properties of the tutor, we create a table cell.
                    <td>{value}</td>    
                ))}
            </tr>
        ));
        // The actual table, with table headers and table rows.
        return (
            <table>
                {tableHeaders}
                {tableRows}
            </table>
        );
    }