React-Redux-Hook：如何从useSelector（）获得单个元素？

Question

我目前正在开发react-redux应用程序。我的工作是使用动作，reduce和商店来显示商店中的不同项目。简而言之，我这样做的方式是：每个项目都有一个特定的数组，如下所示：

let arr = [{"name": "toothbrush", "price": 5}];

我只是为这些数组中的每一个调度一个动作，它们都被添加到商店中。现在，在显示它们的组件中，我使用

const val = useSelector([selector_name]);
return(
    {val}
)

但是，这将所有内容显示在一行中；我想在一个新行上显示每个，并为每个项目有一个按钮。有没有一种方法可以一次打印存储在{val}中的项目？

编辑我的动作：

export function receiveProducts(arr){
    return { type: RECEIVE_PRODUCTS, arr}
}

我的减速器返回以下内容：

function addToStore(state = [], action) {
  switch(action.type) {
    case RECEIVE_PRODUCTS:
        return [
            action.arr[0].name,
            action.arr[0].price,
            ...state,
        ];
    }
}

Answer 1

您可以将map设置为val：

const val = useSelector([selector_name]);
return(
    {val.map(value => {
       return <div>
          <span>{value.name}</span>
          <span>{value.price}</span>
          <button>I am Button</button>
       </div>
    })}
)