javascript - 从 HTTP 请求解析的值不会显示在表中

Question

我正在使用 React JS，我现在正在使用 laravel 创建分页。

我正在使用 map 渲染来自http请求的数据。

{(this.state.materials|| []).map((material, index) => {
    return
        <tr  key={index}>
            <td>{ material.id }</td>
            <td>{ material.Nome }</td>
            <td>    
                <button className="btn btn-primary" onClick={e => this.handleClick(material)}>Requisitar</button>
            </td>
        </tr>                                     
})}

但这并没有显示任何错误。

Answer 1

您在.map中的返回不正确。代码:

{(this.state.materials|| []).map((material, index) => {
return
    <tr  key={index}>
        <td>{ material.id }</td>
        <td>{ material.Nome }</td>
        <td>    
            <button className="btn btn-primary" onClick={e => this.handleClick(material)}>Requisitar</button>
        </td>
    </tr>                                     
})}

被解释为

{
(this.state.materials || []).map(function (material, index) {
    return;
    React.createElement(

由于 ASI(自动分号插入)。您需要更改代码以基本上读取:

{(this.state.materials|| []).map((material, index) => {
return (
    <tr key={index}>
        <td>{ material.id }</td>
        <td>{ material.Nome }</td>
        <td>    
            <button className="btn btn-primary" onClick={e => this.handleClick(material)}>Requisitar</button>
        </td>
    </tr>  
  );                                  
})}