Javascript 在React中更新组件数据

我有以下组件结构

<Dashboard>
   <UserData />
   <MealList />
   <Search />
</Dashboard>

现在我要实现的是基于搜索参数的用餐列表刷新

我从搜索组件获取搜索参数，并将其传递回

MealList

然后我进行REST调用并获取更新的数据

const updateList = async ( ft, tt, fd, td) =>{
        const userId = localStorage.getItem('user_id');
        const updatedMealsList = await searchMeals(userId, ft, tt, fd, td);
        console.log('Updated Meals', updatedMealsList);
        setMeals([]);//Tried this but doesn't work
        setMeals([...meals, ...updatedMealsList]);//
    };

我的问题是如何更新Meallist数组并重新渲染组件

我已经试过了，但没用。我所说的不起作用的意思是，数组中的数据既没有更新也没有重新呈现

下面是组件

const Dashboard = () => {
    const [username, setUsername] = useState("");
    const [email, setEmail] = useState("");
    const [calories, setCalories] = useState("");
    const [meals, setMeals] = useState([]);

    useEffect(async () =>{
        const data = await fetchUserData(localStorage.getItem('email'));
        localStorage.setItem('user_id', data['id']);
        setUsername(data['username']);
        setEmail(data['email']);
        setCalories(data['calories']);
        const mealsData = await fetchMeals(localStorage.getItem('user_id'));
        setMeals([...meals, ...mealsData]);

    }, []);


    const updateList = async ( ft, tt, fd, td) =>{
        const userId = localStorage.getItem('user_id');
        const updatedMealsList = await searchMeals(userId, ft, tt, fd, td);
        setMeals([]);
        console.log('Updated Meals', updatedMealsList);
        setMeals([...meals, ...updatedMealsList]);
    };
    console.log('Updated Meals', meals);
    return (
        <div>
            <Navigation/>
            <div className="wrapper">
                <div style={{display: 'flex', flexFlow: 'row wrap'}}>
                    <UserData username={username} email={email} calories={calories}/>
                    <Search onSubmit={updateList}/>
                </div>
                <MealList meals={meals}/>

            </div>

        </div>

    )
};
export default Dashboard;

const仪表板=（）=>{
const[username，setUsername]=useState（“”）；
const[email，setEmail]=useState（“”）；
常量[卡路里，设置卡路里]=使用状态（“”）；
const[fines，setfines]=useState（[]）；
useffect（异步（）=>{
const data=await fetchUserData（localStorage.getItem（'email'）；
setItem（'user_id'，data['id']）；
setUsername（数据['username']）；
setEmail（数据['email']）；
设置卡路里（数据['卡路里]）；
const mealsData=wait fetchfines（localStorage.getItem（'user_id'））；
设置膳食（[…膳食，…测量数据]）；
}, []);
const updateList=async（ft、tt、fd、td）=>{
const userId=localStorage.getItem（'user_id'）；
const updatemealslist=等待搜索（userId、ft、tt、fd、td）；
三餐（[]）；
console.log（“更新的膳食”，更新的医疗列表）；
SetFounds（[…Founds，…updatedMealsList]）；
};
console.log（“更新的膳食”，膳食）；
返回(
)
};
导出默认仪表板；

米利斯特

const MealList = (props) => {
    return (
        <div style={{width: '70%'}}>
            <h3 style={{color: 'grey', fontSize: '1.4em', fontWeight: '700', marginBottom: '1em'}}><FontAwesomeIcon
                icon={faPlusCircle} style={{color: '#007bff', marginRight: '0.5em'}}/> ADD MEAL</h3>
            <Table striped bordered hover>
                <thead>
                <tr>
                    <th>#</th>
                    <th>Meal</th>
                    <th>Calories</th>
                    <th>Time</th>
                    <th>Date</th>
                    <th>Update</th>
                    <th>Delete</th>
                </tr>
                </thead>
                <tbody>
                {props.meals.map((meal, index) => (<Meal count={index +1} meal={meal}/>))}
                </tbody>
            </Table>
        </div>

    )
};
export default MealList;

const-MealList=（道具）=>{
返回(
加餐
#
一餐
卡路里
时间
日期
更新
删除
{props.fines.map（（膳食，索引）=>（））}
)
};
导出默认MealList；

首先，我建议您阅读以下文章

这详细说明了如何正确使用useEffect挂钩

让dynamicMealId=3；
功能延迟（有效载荷）{
返回新承诺（（解决）=>{
window.setTimeout（（）=>{
解析（有效载荷）
}, 350)
})
}
函数fetchUserData（电子邮件）{
返回延迟({
id:Date.now（），
用户名：'johndoe@doe.com',
卡路里：2000
})
}
函数（用户ID）{
返回延迟([{
id:1，
姓名：“第1餐”
}, {
id:2，
姓名：“第二餐”
}, {
id:3，
姓名：“第三餐”
}])
}
函数（用户ID、过滤器）{
返回延迟（数组.from（{length:3}，（v，k）=>k+1）.map（函数（）{
常餐={
id:dynamicMealId，
名称：“膳食”+dynamicMealId
}
dynamicMealId++；
回餐；
}))
}
函数用户数据（props）{
返回(
{props.user(
用户数据
{props.user.username}
{props.user.carries}
) : (
正在加载用户。。。
)}
);
}
功能搜索（道具）{
函数handleSubmit（ev）{
ev.preventDefault（）
props.onSearch（ev.target.elements[0].value）；
}
返回(
搜寻
输入关键字
)
}
功能测量仪（道具）{
控制台日志（道具、膳食）
返回(
米利斯特

{props.fines.map（函数（餐）{
返回(
{mean.name}
)
})}

)
}
常量仪表板=（）=>{
const[user，setUser]=React.useState（null）
const[fines，setfines]=React.useState（null）
const[filters，setFilters]=React.useState（null）
//加载用户数据
React.useffect（（）=>{
函数loadData（）{
fetchUserData（'some@email.com')
.然后（（用户数据）=>{
setUser（userData）；
返回（userData.id）
})
.然后（（用户膳食）=>{
设置膳食（用户膳食）；
});
}
loadData（）；
}, []);
//装载新食物
React.useffect（（）=>{
如果（！user | |！filters）{return；}
函数搜索（）{
SearchFinds（user.id、过滤器）
.然后（新餐点=>{
设置膳食（当前膳食=>[
…现在的饭菜，
…新餐
])
})
}
搜索（）；
}，[用户，过滤器]；
返回(
仪表板
{用户&&用餐&&(
设置过滤器（新过滤器）}/>
)}
)
}
ReactDOM.render(
,
document.querySelector（“#app”）
)

JS-Bin

在第一个示例中，由于我只看到了

mealsData

，所以您从哪里获得了

fends

数组？同时尝试使用React-dev工具检查上述阵列/数据。是否将

setfines

功能作为道具从

Dashboard

传递到

Meallist

组件？通过阅读问题，我假设

updateList

调用来自那里。。。一旦您将函数传递给正确的组件，它就可以正常工作了。@Edper我已经用useState更新了问题，它在上下文中提供了膳食。@Ryan否，我正在使用setFines更新仪表板中的Fines数组，然后向下传递更新的状态。提供

useEffect

异步函数应该会发出警告。Search是MealList的兄弟，因此两者之间的通信只能在仪表板内部进行。你可能想再读一遍这个问题。我没法让它发挥作用，你能看看我的回购协议吗，

const MealList = (props) => {
    return (
        <div style={{width: '70%'}}>
            <h3 style={{color: 'grey', fontSize: '1.4em', fontWeight: '700', marginBottom: '1em'}}><FontAwesomeIcon
                icon={faPlusCircle} style={{color: '#007bff', marginRight: '0.5em'}}/> ADD MEAL</h3>
            <Table striped bordered hover>
                <thead>
                <tr>
                    <th>#</th>
                    <th>Meal</th>
                    <th>Calories</th>
                    <th>Time</th>
                    <th>Date</th>
                    <th>Update</th>
                    <th>Delete</th>
                </tr>
                </thead>
                <tbody>
                {props.meals.map((meal, index) => (<Meal count={index +1} meal={meal}/>))}
                </tbody>
            </Table>
        </div>

    )
};
export default MealList;