Как отобразить каждый объект массива в (Laravel - ReactJS)

Question

Я впервые здесь, в React Js с Laravel Php Framework.

Проблема: Можно ли получить каждый объект массива в мой API и получить его в каждом разделе. Потому что я получил ошибку в моей консоли, которая говорит

Uncaught TypeError: this.state.missions.map не является функцией. Я не знаю, в чем проблема, но главная цель - получить каждый объект, и цикл должен находиться в определенном разделе div в представлениях

Ex. Если я уже получаю объект массива миссии и храню

<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

Из руководства пользователя json_encode php:

Ассоциативный массив всегда выводится как объект:
{ "Foo": "бар", "Баз": "длинный"}

Контроллер

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

возвращает json объект со свойствами mission и store. Проверьте это на вкладке сети браузера.

Переименуйте 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

избегая условий во многих местах.

Answer 2

эта ошибка вызвана тем, что вы извлекаете данные асинхронно, но к тому времени, когда компонент отображается, данные еще не готовы, так что вы можете иметь флаг, который показывает, что данные извлекаются, и когда флаг является ложным или истинным, как вы хотите. вы можете обработать ваши данные оператором && в ответ так:

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

или вы можете легко сказать сделать это при наличии каких-либо данных

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