mongodb React和Mongo:基于条件加载多个对象状态数组

7fhtutme  于 2023-03-17  发布在  Go
关注(0)|答案(1)|浏览(86)

这是我第一次在这里张贴问题,所以请让我知道,如果我错过了什么。2我试图加载三个不同的对象数组的基础上,布尔开始和完成。
我遇到的问题是,即使每个返回的任务都输入了正确的条件,但如果有多个任务完成、启动等,则每次都会覆盖该值。我认为这可能是一个关闭问题,但到目前为止,我在修复它方面的尝试都没有成功。我真的很感激一些输入。

const[started, setStarted] = useState([{
        title: String,
        description: String,
        date: Object,
        username: String,
        complete: Boolean,
        started:Boolean,
        workers: Array,
        teamID: Number,
        team: String
    }])

    const [todos, setTodos] = useState([{
        title: String,
        description: String,
        date: Object,
        username: String,
        complete: Boolean,
        started:Boolean,
        workers: Array,
        teamID: Number,
        team: String
    }])

    const [completes, setCompletes] = useState([{
        title: String,
        description: String,
        date: Object,
        username: String,
        complete: Boolean,
        started:Boolean,
        workers: Array,
        teamID: Number,
        team: String
    }])

    useEffect( () => {
        const team = localStorage.getItem('team');
        console.log(team);
        axios.get(`/teamTasks/${team}`)
        .then(res => {
            const tasksGrabed = res.data;
            console.log(tasksGrabed);
            loadTasks(tasksGrabed);
        })
    },[])

    function loadTasks(tasksGrabed) {
        var i;
        var task;
        setCompletes([])
        setStarted([])
        setTodos([])

        for (i=0;i<tasksGrabed.length;i++) {
            task=tasksGrabed[i];
            if (task.complete === true) {
                setCompletes([task,...completes]);
                console.log(task.title + " complete");
                console.log(completes);
            } else if (task.started === true) {
                setStarted([task,...started]);
                console.log(task.title + " started");
            } else {
                setTodos([task,...todos]);
                console.log(task.title + " todos");
            }
        }
    }
iqjalb3h

iqjalb3h1#

不可能用for循环以这种方式更新状态,因为它不会立即更新,请看here,但是您可以在组件重新呈现并基于它更新之前使用useState钩子的the previous value,但现在让它变得简单一些:

const loadTasks = (tasksGrabed) => {
  let completes = [];
  let started = [];
  let todos = [];

  tasksGrabed.forEach((element) => {
    if (element.complete === true) {
      completes.push(element);
    } else if (element.started === true) {
      started.push(element);
    } else {
      todos.push(element);
    }
  });

  // once you update your arrays with the corresponding objects,  you update your state
  setCompletes(completes);
  setStarted(started);
  setTodos(todos);
};

相关问题