如何映射（Laravel - ReactJS）中的每个数组对象

Question

我是 React Js With Laravel Php Framework 的新手。

问题： 是否可以将每个数组对象获取到我的 API 并在每个部分中获取它。因为我的控制台中出现错误提示

未捕获的类型错误：this.state.missions.map 不是函数。我不知道问题是什么，但主要目标是获取每个对象，并且循环必须在视图中的特定 div 部分中

例如。如果我已经得到了任务的数组对象并存储了

<div className="mission">
  the object of mission must be here.
</div>

<div className="store">
  the object of store must be here.
</div>

和其他对象。等等

我的控制者：

public function index() {



    $content_mission = DB::table('content_structure')
    ->where('content_pages','=','Home')
    ->where('content_section','=','Mission-Vision')
    ->where('status','=','Active')
    ->orderBy('content_id','Desc')
    ->limit(1)
    ->get();

    $content_store = DB::table('content_structure')
    ->leftJoin('content_upload_assets','content_structure.content_id','=','content_upload_assets.cid')
    ->where('content_pages','=','Home')
    ->where('content_section','=','Store')
    ->where('status','=','Active')
    ->orderBy('content_id','Desc')
    ->limit(1)
    ->get();

    return response()->json(
        array(


        'mission'=>$content_mission,
        'store'=>$content_store)

    );

}

我的组件：

export default class Content extends Component {

    constructor() {
        super();
        this.state = {
            missions: [],
            store: [],

        }

    }

    componentWillMount() {
        axios.get('/api/contents').then(response => {
            this.setState({
                missions: response.data
            });
        }).catch(error => {
            console.log(error);
        })
    }

    render() {
        return (



            <div>

                 // this div is for mission
                <div className="mission-section">

                   <h1></h1>
                   <p></p>
                   <div className="container">
                    {this.state.missions.map(mission => <li>{mission.content}</li>)}
                    </div>

                </div>

                //this div is for store
                <div className="Store"></div>


            </div>

        )   
    }
}

if(document.getElementById('app'))
{
    ReactDOM.render(<Content/>, document.getElementById('app'));
}

Answer 1

此错误是因为您正在异步获取数据，但是当组件被渲染时，数据还没有准备好，因此您可以拥有一个显示数据正在获取的标志，以及该标志何时为您想要的 flase 或 true。您可以通过 && 运算符呈现数据，如下所示：

{this.state.flag && this.state.missions.map(mission => <li>{mission.content}</li>)}

或者你可以很容易地说当有任何数据时渲染它

{&& this.state.missions this.state.missions.map(mission => <li>{mission.content}</li>)}

Answer 2

来自 json_encode php 手册：

关联数组始终作为对象输出：
{"foo":"bar","baz":"long"}

控制器

return response()->json(
    array(
      'mission'=>$content_mission,
      'store'=>$content_store
    )
);

返回带有mission 和store 属性的json object。在浏览器网络选项卡上检查此项。

将componentWillMount 重命名为componentDidMount 并使用适当的数据引用，例如：

componentDidMount() {
    axios.get('/api/contents').then(response => {
        this.setState({
            missions: response.data.missions,
            store: response.data.store
        });
    }).catch(error => {
        console.log(error);
    })
}

稍后在渲染中使用是安全的

{this.state.missions.map(mission => <li>{mission.content}</li>)}

最初this.state.missions 是一个空数组，将使用加载的数组进行更新 - 较早的值已使用对象更新。

这个：

{this.state.missions && this.state.missions.map(mission => <li>{mission.content}</li>)}

对于在初始状态下不可用的更深层次的引用（例如this.state.missions.tasks）是一个很好的提示。在这种情况下应该是相当

{(this.state.missions.length>0) && this.state.missions.map(mission => <li>{mission.content}</li>)}

这个条件可以用来替换整个视图：

render() {
  if (!this.state.missions.length) return <Loading />
  return (
    // title
    // missions map
    // store map

在许多地方避免条件。