Question

对不起，如果之前曾有人问过此问题...我进行了搜索，但找不到解决方案。反正...

我已经从我的API成功映射了数据。

在我的HomePage.js组件中，我具有以下内容：

componentWillMount() {
    this.props.dispatch(fetchOrdersAction());
}

...

{orders.data.length > 0 &&
    <div className="order-items d-flex flex-row align-items-stretch flex-wrap">
        {orders.data.map((list, index) =>
            <ListOrderItem order={list} key={index} clickHandler={this.handleListCardClick} />
        )}
    </div>
}

在ListOrderItem.js中，我的渲染看起来像：

render() {
    const { order, user} = this.props;

    return (
        <div className="order-item d-flex justify-content-between" onClick={this.handleClick}>
            <span className="name-data-holder">{order.user_id}</span>
            <span className="date-data-holder"><Moment date={order.created_at} format="MM/DD/YYYY"/></span>
            <span className="product-name-data-holder">id: {order.product_id}</span>
            <span className="price-data-holder">${order.amount}</span>
            <span className="actions-data-holder">
                <p className="sm-red-action-btn">View Order</p>
            </span>
        </div>
    );
}

现在，我将返回{order.user_id}，它可以正常工作。我现在想做的就是获取与该ID关联的用户的名字。

我的想法是创建一个调度程序，例如：

this.props.dispatch(fetchUsersAction(`filter[id]=5`));

我将此添加到了HomePage.js

如果查看“网络”选项卡，则可以看到调度成功，并且正在返回用户5的数据。

我正在努力的是以下事情：

让它在listOrderItem的每个实例中运行
动态将用户ID传递给过滤器

我尝试在ListOrderItem内运行分派，但收到类似于功能作为反应子项无效的错误

朝正确方向的推动将不胜感激！提前非常感谢。

Answer 1

也许您可以通过componentWillMount（）函数中的ListOrderItem.js进行分派

componentWillMount() {
   const {order} = this.props
   this.props.dispatch(fetchUsersAction(`filter[id]=${order.user_id}`));
}

但这听起来像列表中的许多api调用。您可以直接将它们插入您的api中吗？

使用react，从子组件中的ID获取用户名

1 个答案: