Reactjs axios获取（React）后组件未重新加载

我正在尝试使用React.Context呈现数据库中的项目列表。 我所有的要求都很有效。 当我首先记录我的状态时，我得到一个空数组，然后是一个包含我需要的数据的数组，但我的组件并没有更新。我必须转到另一个页面，然后再回到这个页面获取数据。我真的不明白为什么。。。这是我的档案

ArticlesContext.js:

    import React, { useState, createContext, useEffect } from 'react';
import axios from 'axios'
export const ArticlesContext = createContext();

export function ArticlesProvider(props) {
    const [articles, setArticles] = useState([]);
    const [user, setUser] =useState(0)

    async function getArticles () {
        await axios.get(`/api/publicItem`)
        .then(res => {
            setArticles(res.data);
        })
    }
    
    useEffect( () => {
     getArticles()
    }, [user])
    
    console.log(articles);
    
    return (
        <ArticlesContext.Provider value={[articles, setArticles]}>
            {props.children}
        </ArticlesContext.Provider>
    );
}

    import React, { useContext, useEffect, useState } from 'react';
    
    import './Inventaire.css';
    
    import { ArticlesContext } from '../../../context/ArticlesContext';
    import DeleteAlert from './Delete/Delete';
    import Modify from './Modify/Modify';
    import Filter from './Filter/Filter';
    import axios from 'axios'
    import Crud from '../../Elements/Articles/Crud/Crud';
import List from './List/List';
    
    export default function Inventaire() {
        const [articles, setArticles] = useContext(ArticlesContext);
        const [filter, setFilter] = useState(articles)
        console.log(articles);
        //list for Inputs
        const cat = articles.map(a => a.category.toLowerCase());
        const categoryFilter = ([...new Set(cat)]);
        const gender = articles.map(a => a.gender.toLowerCase());
        const genderFilter = ([...new Set(gender)]);
        //Event Listenner
    
        //Uncheck All checkboxes
        function UncheckAll() {
            const el = document.querySelectorAll("input.checkboxFilter");
            console.log(el);
            for (var i = 0; i < el.length; i++) {
                var check = el[i];
                if (!check.disabled) {
                    check.checked = false;
                }
            }
        }
    
        //SearchBar
        const searchChange = (e) => {
            e.preventDefault();
    
            const stuff = articles.filter((i) => {
                return i.name.toLowerCase().match(e.target.value.toLowerCase())
            })
            setFilter(stuff)
            UncheckAll(true)
        }
    
    
        const Types = (e) => {
            if (e.target.checked === true) {
                const stuff = filter.filter((i) => {
                    return i.category.toLowerCase().match(e.target.value.toLowerCase())
                })
                setFilter(stuff)
                console.log(articles);
            } else if (e.target.checked === false) {
                setFilter(articles)
            }
        }
        const Gender = (e) => {
            if (e.target.checked === true) {
                const stuff = filter.filter((i) => {
                    console.log(i.category, e.target.value);
                    return i.gender.toLowerCase().match(e.target.value.toLowerCase())
                })
                setFilter(stuff)
            } else if (e.target.checked === false) {
                setFilter(articles)
            }
        }
        return (
            <div className="inventaireContainer">
                <input type="text" placeholder="Recherche un Article" onChange={searchChange} />
    
                <div className="inventaireMenu">
                    <Crud />
                    <Filter
                        filter={Types}
                        categorys={categoryFilter}
                        genre={genderFilter}
                        target={Gender}
                    />
                </div>
    
                <List filter={filter} articles={articles}/>
            </div>
        )
    }

import React from 'react';
import DeleteAlert from '../Delete/Delete';
import Modify from '../Modify/Modify';

export default function List({ filter, articles }) {
    return (
        <div>
            {filter.map((details, i) => {
                return (
                    <div className="inventaireBlock" >
                        <div className="inventaireGrid">
                            <div className="inventaireItemImg">
                                <img src={details.image} alt="ItemImg" />
                            </div>
                            <h2>{details.name}</h2>
                            <h3>{details.category}</h3>
                            <h3>{details.gender}</h3>
                            <div>
                                <p>S :{details.sizes[0].s}</p>
                                <p>M :{details.sizes[0].m}</p>
                                <p>L :{details.sizes[0].l}</p>
                                <p>XL :{details.sizes[0].xl}</p>
                            </div>
                            <h2> Prix: {details.price}</h2>
                            <div className="modify">
                                <Modify details={details._id} />
                            </div>
                            <div className="delete"  >
                                <DeleteAlert details={details._id} articles={articles} />
                            </div>
                        </div>
                    </div>
                )
            })}
        </div>
    )
}

import React，{useState，createContext，useffect}来自'React'；
从“axios”导入axios
导出常量ArticlesContext=createContext（）；
导出函数ArticlesProvider（道具）{
const[articles，setArticles]=useState（[]）；
const[user，setUser]=useState（0）
异步函数getArticles（）{
等待axios.get（`/api/publicItem`）
。然后（res=>{
固定粒子（res.data）；
})
}
useffect（（）=>{
getArticles（）
}，[用户]）
控制台日志（文章）；
返回(
{props.children}
);
}

Inventaire.js:

    import React, { useState, createContext, useEffect } from 'react';
import axios from 'axios'
export const ArticlesContext = createContext();

export function ArticlesProvider(props) {
    const [articles, setArticles] = useState([]);
    const [user, setUser] =useState(0)

    async function getArticles () {
        await axios.get(`/api/publicItem`)
        .then(res => {
            setArticles(res.data);
        })
    }
    
    useEffect( () => {
     getArticles()
    }, [user])
    
    console.log(articles);
    
    return (
        <ArticlesContext.Provider value={[articles, setArticles]}>
            {props.children}
        </ArticlesContext.Provider>
    );
}

    import React, { useContext, useEffect, useState } from 'react';
    
    import './Inventaire.css';
    
    import { ArticlesContext } from '../../../context/ArticlesContext';
    import DeleteAlert from './Delete/Delete';
    import Modify from './Modify/Modify';
    import Filter from './Filter/Filter';
    import axios from 'axios'
    import Crud from '../../Elements/Articles/Crud/Crud';
import List from './List/List';
    
    export default function Inventaire() {
        const [articles, setArticles] = useContext(ArticlesContext);
        const [filter, setFilter] = useState(articles)
        console.log(articles);
        //list for Inputs
        const cat = articles.map(a => a.category.toLowerCase());
        const categoryFilter = ([...new Set(cat)]);
        const gender = articles.map(a => a.gender.toLowerCase());
        const genderFilter = ([...new Set(gender)]);
        //Event Listenner
    
        //Uncheck All checkboxes
        function UncheckAll() {
            const el = document.querySelectorAll("input.checkboxFilter");
            console.log(el);
            for (var i = 0; i < el.length; i++) {
                var check = el[i];
                if (!check.disabled) {
                    check.checked = false;
                }
            }
        }
    
        //SearchBar
        const searchChange = (e) => {
            e.preventDefault();
    
            const stuff = articles.filter((i) => {
                return i.name.toLowerCase().match(e.target.value.toLowerCase())
            })
            setFilter(stuff)
            UncheckAll(true)
        }
    
    
        const Types = (e) => {
            if (e.target.checked === true) {
                const stuff = filter.filter((i) => {
                    return i.category.toLowerCase().match(e.target.value.toLowerCase())
                })
                setFilter(stuff)
                console.log(articles);
            } else if (e.target.checked === false) {
                setFilter(articles)
            }
        }
        const Gender = (e) => {
            if (e.target.checked === true) {
                const stuff = filter.filter((i) => {
                    console.log(i.category, e.target.value);
                    return i.gender.toLowerCase().match(e.target.value.toLowerCase())
                })
                setFilter(stuff)
            } else if (e.target.checked === false) {
                setFilter(articles)
            }
        }
        return (
            <div className="inventaireContainer">
                <input type="text" placeholder="Recherche un Article" onChange={searchChange} />
    
                <div className="inventaireMenu">
                    <Crud />
                    <Filter
                        filter={Types}
                        categorys={categoryFilter}
                        genre={genderFilter}
                        target={Gender}
                    />
                </div>
    
                <List filter={filter} articles={articles}/>
            </div>
        )
    }

import React from 'react';
import DeleteAlert from '../Delete/Delete';
import Modify from '../Modify/Modify';

export default function List({ filter, articles }) {
    return (
        <div>
            {filter.map((details, i) => {
                return (
                    <div className="inventaireBlock" >
                        <div className="inventaireGrid">
                            <div className="inventaireItemImg">
                                <img src={details.image} alt="ItemImg" />
                            </div>
                            <h2>{details.name}</h2>
                            <h3>{details.category}</h3>
                            <h3>{details.gender}</h3>
                            <div>
                                <p>S :{details.sizes[0].s}</p>
                                <p>M :{details.sizes[0].m}</p>
                                <p>L :{details.sizes[0].l}</p>
                                <p>XL :{details.sizes[0].xl}</p>
                            </div>
                            <h2> Prix: {details.price}</h2>
                            <div className="modify">
                                <Modify details={details._id} />
                            </div>
                            <div className="delete"  >
                                <DeleteAlert details={details._id} articles={articles} />
                            </div>
                        </div>
                    </div>
                )
            })}
        </div>
    )
}

import React，{useContext，useffect，useState}来自'React'；
导入“/Inventaire.css”；
从“../../../context/ArticlesContext”导入{ArticlesContext}；
从“./Delete/Delete”导入DeleteAlert；
从“./Modify/Modify”导入修改；
从“./Filter/Filter”导入筛选器；
从“axios”导入axios
从“../../Elements/Articles/Crud/Crud”导入Crud；
从“./List/List”导入列表；
导出默认函数Inventaire（）{
const[articles，setArticles]=useContext（ArticlesContext）；
const[filter，setFilter]=useState（项目）
控制台日志（文章）；
//输入列表
const cat=articles.map（a=>a.category.toLowerCase（））；
常量categoryFilter=（[…新集合（cat）]）；
const-gender=articles.map（a=>a.gender.toLowerCase（））；
const genderFilter=（[…新集合（性别）]；
//事件列表器
//取消选中所有复选框
函数UncheckAll（）{
const el=document.queryselectoral（“input.checkboxFilter”）；
控制台日志（el）；
对于（变量i=0；i{
e、 预防默认值（）；
const stuff=articles.filter（（i）=>{
返回i.name.toLowerCase（）.match（e.target.value.toLowerCase（））
})
设置过滤器（填充）
不勾选（正确）
}
常数类型=（e）=>{
如果（e.target.checked==true）{
常量stuff=filter.filter（（i）=>{
返回i.category.toLowerCase（）.match（e.target.value.toLowerCase（））
})
设置过滤器（填充）
控制台日志（文章）；
}else if（e.target.checked==false）{
设置过滤器（文章）
}
}
常数性别=（e）=>{
如果（e.target.checked==true）{
常量stuff=filter.filter（（i）=>{
控制台日志（即类别，即目标值）；
返回i.gender.toLowerCase（）.match（e.target.value.toLowerCase（））
})
设置过滤器（填充）
}else if（e.target.checked==false）{
设置过滤器（文章）
}
}
返回(
)
}

List.js:

    import React, { useState, createContext, useEffect } from 'react';
import axios from 'axios'
export const ArticlesContext = createContext();

export function ArticlesProvider(props) {
    const [articles, setArticles] = useState([]);
    const [user, setUser] =useState(0)

    async function getArticles () {
        await axios.get(`/api/publicItem`)
        .then(res => {
            setArticles(res.data);
        })
    }
    
    useEffect( () => {
     getArticles()
    }, [user])
    
    console.log(articles);
    
    return (
        <ArticlesContext.Provider value={[articles, setArticles]}>
            {props.children}
        </ArticlesContext.Provider>
    );
}

    import React, { useContext, useEffect, useState } from 'react';
    
    import './Inventaire.css';
    
    import { ArticlesContext } from '../../../context/ArticlesContext';
    import DeleteAlert from './Delete/Delete';
    import Modify from './Modify/Modify';
    import Filter from './Filter/Filter';
    import axios from 'axios'
    import Crud from '../../Elements/Articles/Crud/Crud';
import List from './List/List';
    
    export default function Inventaire() {
        const [articles, setArticles] = useContext(ArticlesContext);
        const [filter, setFilter] = useState(articles)
        console.log(articles);
        //list for Inputs
        const cat = articles.map(a => a.category.toLowerCase());
        const categoryFilter = ([...new Set(cat)]);
        const gender = articles.map(a => a.gender.toLowerCase());
        const genderFilter = ([...new Set(gender)]);
        //Event Listenner
    
        //Uncheck All checkboxes
        function UncheckAll() {
            const el = document.querySelectorAll("input.checkboxFilter");
            console.log(el);
            for (var i = 0; i < el.length; i++) {
                var check = el[i];
                if (!check.disabled) {
                    check.checked = false;
                }
            }
        }
    
        //SearchBar
        const searchChange = (e) => {
            e.preventDefault();
    
            const stuff = articles.filter((i) => {
                return i.name.toLowerCase().match(e.target.value.toLowerCase())
            })
            setFilter(stuff)
            UncheckAll(true)
        }
    
    
        const Types = (e) => {
            if (e.target.checked === true) {
                const stuff = filter.filter((i) => {
                    return i.category.toLowerCase().match(e.target.value.toLowerCase())
                })
                setFilter(stuff)
                console.log(articles);
            } else if (e.target.checked === false) {
                setFilter(articles)
            }
        }
        const Gender = (e) => {
            if (e.target.checked === true) {
                const stuff = filter.filter((i) => {
                    console.log(i.category, e.target.value);
                    return i.gender.toLowerCase().match(e.target.value.toLowerCase())
                })
                setFilter(stuff)
            } else if (e.target.checked === false) {
                setFilter(articles)
            }
        }
        return (
            <div className="inventaireContainer">
                <input type="text" placeholder="Recherche un Article" onChange={searchChange} />
    
                <div className="inventaireMenu">
                    <Crud />
                    <Filter
                        filter={Types}
                        categorys={categoryFilter}
                        genre={genderFilter}
                        target={Gender}
                    />
                </div>
    
                <List filter={filter} articles={articles}/>
            </div>
        )
    }

import React from 'react';
import DeleteAlert from '../Delete/Delete';
import Modify from '../Modify/Modify';

export default function List({ filter, articles }) {
    return (
        <div>
            {filter.map((details, i) => {
                return (
                    <div className="inventaireBlock" >
                        <div className="inventaireGrid">
                            <div className="inventaireItemImg">
                                <img src={details.image} alt="ItemImg" />
                            </div>
                            <h2>{details.name}</h2>
                            <h3>{details.category}</h3>
                            <h3>{details.gender}</h3>
                            <div>
                                <p>S :{details.sizes[0].s}</p>
                                <p>M :{details.sizes[0].m}</p>
                                <p>L :{details.sizes[0].l}</p>
                                <p>XL :{details.sizes[0].xl}</p>
                            </div>
                            <h2> Prix: {details.price}</h2>
                            <div className="modify">
                                <Modify details={details._id} />
                            </div>
                            <div className="delete"  >
                                <DeleteAlert details={details._id} articles={articles} />
                            </div>
                        </div>
                    </div>
                )
            })}
        </div>
    )
}

从“React”导入React；
从“../Delete/Delete”导入DeleteAlert；
从“../Modify/Modify”导入修改；
导出默认函数列表（{filter，articles}）{
返回(
{filter.map（（详细信息，i）=>{
返回(
{details.name}
{details.category}
{详情.性别}
S:{details.size[0].S}

M:{details.size[0].M}

L:{details.size[0].L}

XL:{details.size[0].XL}

大奖赛：{details.price}
)
})}
)
}

---

感谢您抽出时间

使用您当前的代码，它应该可以工作。下面是模拟您的代码的示例。一旦您输入页面BTW，它会立即显示数据，您从哪个组件将

过滤器

和

文章

传递到

列表

组件？感谢您的回复，我通过Inventaire组件传递它。我可能应该在上下文中将user设置为1，或者在组件idk中设置axios get req…我将

（第85行）组件名称更改为

，这是我自己的错误。但我认为错误来自于过滤器状态。页面加载时它是未定义的，所以没有显示任何内容，但当我触发**searchChange**所有内容显示时。我将从这里开始解决问题。我在列表组件中使用过滤器和文章作为参数，使用

If-Else

，解决了这个问题