如何在React组件中将字符串转换为JSON对象并以表格形式展示

1. 响应解析加固（可选） #

你给出的服务端返回示例是序列化后的JSON字符串，如果你当前调用result.json()后拿到的还是字符串而非可遍历的数组，可以调整SearchForm组件handleSubmit方法里的fetch逻辑，确保数据格式正确：

fetch(`http://localhost:3000/onSubmit?param1=${cat}&param2=${searchquery}`, {
    method: "GET",
    headers: {
        'Content-type': 'application/json'
    }
})
.then(result => {
    // 兼容返回字符串和JSON对象两种情况
    return result.text().then(text => {
        try {
            return JSON.parse(text)
        } catch (e) {
            return text
        }
    })
})
.then(contents => {
    // 确保存入state的是数组
    const resData = Array.isArray(contents) ? contents : []
    this.setState({ searchResponse: resData}, function() {
        console.log(this.state.searchResponse);
    })
})
.catch(err => console.log('请求出错：', err))

2. 重写DisplayResults组件实现表格渲染 #

直接替换你原来的DisplayResults组件代码即可，自动适配返回的字段生成表格，图片字段会自动渲染为可展示的图片：

import React from 'react'; 

class DisplayResults extends React.Component {
    render() {
        const { searchResults } = this.props
        // 无结果时展示提示
        if (!searchResults || searchResults.length === 0) {
            return <div style={{marginTop: '20px'}}>暂无匹配的搜索结果</div>
        }
        // 取第一条数据的键作为表头
        const headers = Object.keys(searchResults[0])
        return ( 
            <div style={{marginTop: '20px'}}>
                <h3>搜索结果</h3>
                <table border="1" cellPadding="8" cellSpacing="0" style={{width: '100%', borderCollapse: 'collapse'}}>
                    <thead>
                        <tr>
                            {headers.map(header => (
                                <th key={header}>{header}</th>
                            ))}
                        </tr>
                    </thead>
                    <tbody>
                        {searchResults.map((row, rowIndex) => (
                            <tr key={rowIndex}>
                                {headers.map(header => (
                                    <td key={header}>
                                        {/* 图片字段特殊处理，渲染为img标签 */}
                                        {header === 'imageReference' ? 
                                            <img 
                                                src={row[header]?.trim()} 
                                                alt={`tutor-${row.tutorID || rowIndex}`} 
                                                style={{maxWidth: '100px', maxHeight: '100px'}}
                                            /> 
                                            : row[header]
                                        }
                                    </td>
                                ))}
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        ); 
    }
}

export default DisplayResults; 

可选调整说明 #

• 如果需要把表头改成中文，比如把tutorID改成“导师ID”，可以自己维护一个表头映射对象替换自动生成的headers即可
• 表格的样式、图片的宽高都可以根据你的设计需求自行调整CSS
• 如果不需要展示imageReference字段，直接在表头过滤掉这个key即可

内容的提问来源于stack exchange，提问作者Leks