Пытается вывести sh ответ от Ax ios .all до состояния в ComponentDidMount, но получает нежелательный ответ в течение жизненного цикла - PullRequest
Новая
       7

Пытается вывести sh ответ от Ax ios .all до состояния в ComponentDidMount, но получает нежелательный ответ в течение жизненного цикла

0 голосов
/ 24 марта 2020

С блокировкой я трачу время на изучение ReactJs и создание приложения todo в стеке MERN.

Я пытаюсь использовать Ax ios .all для одновременного включения три маршрута в Express. Приложение работает, но не возвращает данные в метод .map. Код: 

import React, { Component } from 'react';
import axios from 'axios';

//  [[ MATERIAL UI COMPONENTS ]]   //
import TaskList from './TaskList';
import TaskHeader from './TaskHeader';
import { Typography, Paper, Grid, Divider } from '@material-ui/core';
import Button from '@material-ui/core/Button';



   class Tasks extends Component {
        constructor(props) {
            super(props);

            this.deleteTask = this.deleteTask.bind(this);

            this.state = {
                tasks: [],
                category: [],
                goals: []
            };
        }

        async componentDidMount() {
            const taskURI = 'http://localhost:5000/TaskData/';
            const categoryURI = 'http://localhost:5000/CategoryData/';
            const goalURI = 'http://localhost:5000/GoalData/';

            const getTasks = axios.get(taskURI);
            const getCategory = axios.get(categoryURI);
            const getGoals = axios.get(goalURI);

            axios
                .all([ getTasks, getCategory, getGoals ])
                .then(
                    axios.spread((taskData, categoryData, goalData) => {
                        this.setState({ tasks: taskData });
                        this.setState({ category: categoryData });
                        this.setState({ goals: goalData });
                    })
                )
                .catch((error) => {
                    console.log(error);
                });
            console.log('tasks');
            console.log(this.state.tasks);
        }

        deleteTask(id) {
            axios.delete('http://localhost:5000/TaskData/' + id).then((response) => {
                console.log(response.data);
            });

            this.setState({
                tasks: this.state.tasks.filter((cl) => cl._id !== id)
            });
        }

        render() {
            return (
                <Paper
                    style={{
                        padding: 0,
                        margin: 0,
                        height: '100vh',
                        backgroundColor: '#11233d'
                    }}
                    elevation={0}
                >
                    <Grid container justify="center" style={{ marginTop: '1rem' }}>
                        <Grid item xs={11} md={11} lg={11}>
                            <TaskHeader />
                        </Grid>
                    </Grid>
                    <Grid container justify="center" style={{ marginTop: '1rem' }}>
                        <Grid item xs={11} md={11} lg={11}>
                            <TaskList
                                tasks={this.state.tasks}
                                category={this.state.category}
                                goals={this.state.goals}
                                deleteTask={this.id}
                            />
                        </Grid>
                    </Grid>
                </Paper>
            );
        }
    }

    export default Tasks;

Затем я вызываю другой компонент, передавая реквизиты: 

import React from 'react';
import Task from './Task';
//import { confirmTask } from './confirmTask';

//  [[  MATERIAL UI COMPONENTS]]
import Paper from '@material-ui/core/Paper';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import Checkbox from '@material-ui/core/Checkbox';

// [[ FUNCTION ]] //
function TaskList({ tasks, categories, goals, removeTask }) {
    debugger;
    console.log('Length');
    console.log(tasks.length);
    console.log('Tasks array:');
    console.log(tasks);
    if (tasks.length)
        return (
            <Paper
                style={{
                    padding: 0,
                    margin: 0,
                    backgroundColor: '#23334b'
                }}
            >
                debugger;
                <h5>header</h5>
                <List>
                    {tasks.map((task, i) => (
                        <React.Fragment key={i}>
                            {/* <confirmTask checked={removeTask} /> */}
                            <Checkbox tabIndex={-1} checked={removeTask} />
                            <h5>hi</h5>
                            <Task
                                {...task}
                                key={task.userId}
                                category={categories}
                                goals={goals}
                                removeTask={removeTask}
                            />
                            <Divider style={{ backgroundcolor: '#2d418a' }} />
                        </React.Fragment>
                    ))}
                </List>
            </Paper>
        );
    return null;
}

export default TaskList;

Просмотр шагов console.log и отладчика для первого журнала (this.state.tasks) показывает массив задач в маршруте. Хорошо. Но, пытаясь установить setState, из того, что я прочитал, метод Lifecycle затем вызывает render () и вызывается новый компонент, но не передает состояние [tasks]. Таким образом, tasks.length равен 0, поэтому tasks.map не вызывается и не запускается, потому что задание равно нулю.

Вопрос. Как использовать setState для захвата результатов axios.spread, если я не могу установить использование setState из .then?

Будет полезна любая помощь.

Обновление: я добавил эти консоли журналы для отслеживания. Первый раз массив [], так что ничего. Затем он запускается снова, когда «ComponentDidMount» завершает работу, и сохраняет данные в массиве при просмотре консоли (см. Снимок экрана ниже). НО, несмотря на то, что массив отображается как [13] tasks.length по-прежнему не удается и возвращает ноль. ?? 

function TaskList({ tasks, categories, goals, removeTask }) {
    debugger;
    console.log('Length');
    console.log(tasks.length);
    console.log('Tasks array:');
    console.log(tasks);
    if (tasks.length)
        return (

введите описание изображения здесь

1 Ответ

0 голосов
/ 24 марта 2020

добро пожаловать в StackOverflow. Я думаю, что вы можете использовать метод топора ios .spread неправильно. Вероятно, это должно быть: 

                .then(
                    axios.spread((taskData, categoryData, goalData) => {
                        this.setState({ tasks: taskData.data });
                        this.setState({ category: categoryData.data });
                        this.setState({ goals: goalData.data });
                    });
                );

Отказ от ответственности: я сам не проверял.

...