props 未定义，尽管状态已更改

Question

我是反应新手。我有一个父组件导航栏，其状态为“Total_Item”。该数组是在单击 Modal 时添加的。值正在填充。现在我想获取这个数组的长度并在我的导航组件中显示在我的购物车按钮（目前是一个简单的按钮）上。但它说未定义。

所以数据不会保存在 Navbar 组件的 props (Tot_Item) 中。我确信 react 的呈现方式存在一些概念性错误。在这一点上，一个清晰的解释真的会有所帮助。

请看下面的沙盒：

https://codesandbox.io/s/blazing-sky-cet22

谢谢 萨尔

Answer 1

在文件Navbar.jsx 中，this.state.Tot_Item 的值为空数组。使用this.setState函数改变this.state.Tot_Item的值 => 在文件Navv.jsx 中this.props.Tot_Item 的值是空数组。更改呈现按钮数组的方式。

https://codesandbox.io/s/stoic-rubin-wg2fo

Answer 2

你不需要在 React 中使用 async 和 await，因为它应该异步工作。 但是，您可以将回调函数传递给 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
});

至于为什么this.props.Tot_Item在你的Navv组件中总是undefined，原因是子组件不能以任何方式修改其父组件的状态。

现在您的组件结构如下：Navbar 包含Navv 和Menu。 Menu 是包含项目列表的那个，应该更新选定项目的列表，而Navv 只是应该显示所述数组中的项目数。

但是，有一个问题：您不能将数据直接从 Menu 传递给它的兄弟 Navv。 必须有一个父组件（在本例中为 Navbar）从Menu 获取数据并将其传递给Navv。但是，它并没有像你所拥有的那样真正起作用。 子组件 (Menu) 更改父组件 (Navbar) 状态的唯一方法是使用回调方法，如下例所示：

• Navbar 组件的变化

  // 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>
    );

• Menu 组件的变化

  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);
      }
    );
  }

Here 你有一个包含所有这些更改的沙盒示例的工作版本。希望对您有所帮助！

Answer 3

您可以进行以下更改。

1. 你可以把你的状态放在构造函数中。

2. 您需要使用 FAT 运算符和您喜欢的 setState 声明 ListVal。 （在我的情况下，我在模态弹出窗口中单击“确定”按钮并将其显式设置为 2，并且它也出现在屏幕上）

     import React, { Component } from "react";
    import Menu from "./Menu";
    import Navv from "./Navv";
   
    class Navbar extends Component {
   
      constructor(props)
      {
        super(props);
        this.state = {
          Category: [
            {
              id: 1,
              FoodType: "Chinese",
              Menu: ["Egg Drop", "Chicken Fried", "Beef Fried"],
              Price: [2, 8, 10]
            },
   
   
        {
          id: 2,
          FoodType: "Mexican",
          Menu: ["Veg Burrito", "Chicken Burrito", "Beef Burrito"],
          Price: [7, 8, 10]
        }
      ],
   
      One_Item: [
        {
          listvalue: null,
          Select_Item: null,
          Select_Price: null,
          Select_Quantity: null,
          Select_Item_TotalPrice: null
        }
      ],
   
      Total_Item: 0
    };
    }
   
   
    Listval=async()=>{
    this.setState({ Total_Item: 2});
    }
   
    render() {
    return (
      <React.Fragment>
        <Navv Tot_Item={this.state.Total_Item} />
        <Menu
           Listvalll={this.Listval}
          Objs_Type={this.state.Category}
        />
      </React.Fragment>
    );
    }
    }
    export default Navbar;