时间戳

首页 > 解决方案 > React 函数对象作为 React 子对象无效

reactjs - React 函数对象作为 React 子对象无效

问题描述

我开始做出反应，我有几个疑问。我有addProductInventroy一个点击后触发的函数（）。你想要做的是：

  1. 将点击产品的 id推入数组
  2. 创建一个包含数组中所有产品的列表，并getProduct通过 axios 调用返回一个 rest api 的名称和产品描述。

有了这个，系统会抛出以下错误：

错误：对象作为 React 子对象无效（找到：[对象承诺]）。如果您打算表示子元素的集合，请改用数组。

第一个问题是如何解决问题，第二个是看看是否有另一种方法可以不必将列表保存在状态中。

addProductINventroy = async e => {

        this.state.inventory.push(e.target.value);
        this.setState(
            {inventroyhtml:this.state.inventory.map((item, key) =>
            <li key={item}>{item} 
            {this.getProduct(item).name}
            </li> )

        })

    }


getProduct = async id => {

            const product = await axios.get('http://localhost:4000/api/products/'+id);
            return {product}


    }

标签： reactjsaxios

解决方案

我不熟悉 Axios，所以我不确定如何使用它。不过，我发现其他功能存在一些问题。

this.state.inventory.push(e.target.value);直接改变状态。这是个坏主意。您可以在此处阅读原因：https ://daveceddia.com/why-not-modify-react-state-directly/ 。基本上，总是setState()在更新状态时使用。

其次，我不建议将 React 组件置于您的状态中。您不需要这样做，因为您已经拥有您所在州的产品的 id 值（至少据我所知）。这是如何实现逻辑的示例：

addProductINventroy = async e => {
    // Get your API output here, it appears that Axios already 
    // conveniently turns your response into a javascript object:
    const newProduct = await getProduct(e.target.value);

    // Add your product to the inventory state object
    this.setState(inventory: [...inventory, newProduct])
}

render() {
    return this.state.inventory.map((item, index) =>
        <li key={index}>
            {item.name}
        </li> )
    })
}

请注意，我在这里使用 ES6扩展运算符将 id 连接到现有数组。这会创建一个新数组，并且不会改变旧数组。

我也实现了这个render()方法，你还没有展示你渲染东西的部分。这是渲染时如何访问状态对象的示例。

请注意，在我的实现中，inventory状态对象包含 JSON 格式的所有产品。如果您需要在inventory其他地方使用该对象作为 ID，您应该给它一个不同的名称。

推荐阅读