Javascript 虽然状态已更改，但道具未定义

我是新来的。我有一个父组件Navbar，它的状态是“Total_Item”。此数组是在单击Modal时添加的。这些值正在填充。现在我想得到这个数组的长度，并在我的导航组件中显示我的购物车按钮（目前是一个简单的按钮）。但它说的是未定义的

因此，数据不会保存在导航栏组件的props（Tot_项）中。我确信，react呈现的方式存在一些概念上的错误。在这一点上，一个清晰的解释确实会有所帮助

请参见下面的沙盒：

谢谢

---

sal

您可以执行以下更改

您可以在构造函数中放置您的状态

您需要使用FAT运算符和您喜欢的设置状态声明ListVal。（在我的例子中，我在模式弹出窗口中单击OK按钮并将其显示在屏幕上时，已明确将其设置为2）

import React，{Component}来自“React”；
从“/Menu”导入菜单；
从“/Navv”导入Navv；
类导航栏扩展组件{
建造师（道具）
{
超级（道具）；
此.state={
类别：[
{
id:1，
食物类型：“中文”，
菜单：[“蛋液”、“炸鸡”、“炸牛肉”]，
价格：[2,8,10]
},
{
id:2，
食物类型：“墨西哥”，
菜单：[“蔬菜卷饼”、“鸡肉卷饼”、“牛肉卷饼”]，
价格：[7,8,10]
}
],
一个项目：[
{
listvalue:null，
选择项目：空，
选择价格：空，
选择数量：空，
选择项目总价格：空
}
],
项目总数：0
};
}
Listval=async（）=>{
this.setState（{Total_Item:2}）；
}
render（）{
返回(
);
}
}
导出默认导航栏；

---

您不需要在React中使用

async

和

wait

，因为它应该异步工作但是，您可以将回调函数传递给

setState

，以执行所需操作。该方法应作为

setState

调用中的第二个参数传递，并且在React成功更新状态之前，您传递的函数不会运行

this.setState({
  myVar: 'value to print'
}, () => console.log(this.state.myVar));

另外，我注意到您在

listval

方法上多次调用

setState

。如果要同时设置多个属性，实际上不必多次调用

setState

。由于状态是一个对象，您可以在一次调用中更改所需的所有属性，如下所示：

this.setState({
  Select_Price: ll,
  Select_Item: ll3,
  Select_Item_TotalPrice: ll6,
  Total_Item: ll7
});

至于为什么

这个.props.Tot_项在
Navv
组件中总是
未定义
，原因是子组件不能以任何方式修改其父组件的状态

现在，组件的结构如下：
Navbar
包含
Navv
和
菜单
菜单
包含项目列表，用于更新所选项目列表，而
Navv
仅用于显示所述数组中的项目数

但是，有一个问题：您不能直接从
菜单
将数据传递给它的同级
Navv，必须有一个父组件（在这种情况下，
Navbar
）从
菜单
获取数据并将其传递给
Navv
。然而，它并没有像你所拥有的那样真正起作用子组件（
菜单
）更改父级（
导航栏
）状态的唯一方法是使用回调方法，如以下示例所示：


导航栏
组件的更改


您有一个沙盒示例的工作版本，其中包含所有这些更改。希望有帮助
 在文件
Navbar.jsx
中，
this.state.Tot\u项的值为空数组。使用
this.setState
函数更改
this.state.Tot_项的值
=>文件
Navv.jsx
中
此.props.Tot_项的值为空数组。更改渲染按钮数组的方式

在
Navbar
中看起来与任何东西都不一样，因此
会更新该状态。传递给
Navv
的Total\u项总是相同的。Drawed会追加Total\u项。我把它记录下来了。问题是将问题传递给什么？哪里在
Navbar
中没有任何
this.setState（{Total\u Item:…}）
调用<代码>导航栏
只需将
此.state.Total_项
传递到
Navv
和
此.state.Category
传递到
菜单
。没有更新任何内容。我使用Listval函数OK在菜单组件中设置了状态（Total_Item=ll7），有两个引用（L35和L43）指向
菜单中的某些
此.state.Total_Item
，但没有对
菜单中的该状态进行任何操作。您正在尝试更新导航栏中的状态吗？在下一行（L45）中，您
console.log（this.props.Tot_项）
但这不是传递到
菜单的道具，因此我完全希望它是未定义的<代码>导航车
有一个
Tot_项目
。看来你把逻辑混为一谈了。谢谢Raghvender。我试着按照你说的做，但似乎对我不起作用，我试着使用fat函数，但它给出了错误。谢谢Raghvender.，总的_项来自ll7。问题是Navbar Component中的async不起作用。虽然您解决了问题，但这会导致我的代码中出现另一个问题。如何使异步功能工作。请看沙盒：为什么在做这件事的时候使用wait.setState？Raghvender我是react的新手。我只是想看看consoleNo buddy的结果，这绝对不是react的工作方式。你可以先了解react中的状态，然后继续下去公主，我负债了。非常感谢你。这对我很有教育意义。正是我所期待的答案
this.setState({
  Select_Price: ll,
  Select_Item: ll3,
  Select_Item_TotalPrice: ll6,
  Total_Item: ll7
});

  // CHANGE: Create callback function to send data to parent
  updateTotalItems = total => {
    this.setState({ Total_Item: total }, () =>
      console.log("total items in navbar", this.state.Total_Item)
    );
  };

  // CHANGE: pass callback method as props to the children component that modifies the item counter
  render() {
    return (
      <React.Fragment>
        <Navv Tot_Item={this.state.Total_Item} />
        <Menu
          updateTotalItems={this.updateTotalItems}
          Objs_Type={this.state.Category}
        />
      </React.Fragment>
    );

  Listval() {
    /* ... */

    // CHANGE: No need to call setState multiple times
    this.setState(
      {
        Select_Price: ll,
        Select_Item: ll3,
        Select_Item_TotalPrice: ll6,
        Total_Item: ll7
      },
      () => {
        // CHANGE: Use callback function to send the array length to the parent component
        this.props.updateTotalItems(this.state.Total_Item.length);
      }
    );
  }