如何使用 React Hooks 和 Redux 将数据传递给对象

Question

我正在尝试使用 React 和 Redux 将从数据库获取的数据传递给对象。我不知道我做错了什么

这是我的代码

const [orders, setOrders] = useState([]);

useEffect(() => {
    props.fetchOrder(setOrders);
}, []);

console.log(orders);

const columnsFromBackend = {
    newOrder: {
        name: "Requested",
        items: orders
    },
    x: {
        name: "x",
        items: []
    }
};
const [columns, setColumns] = useState(columnsFromBackend);

console.log(columns);

结果是页面呈现两次，在控制台中显示，fir

orders = []

columns = {newOrder: {…}, x: {…}}

第二次

orders = (39) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

columns = {newOrder: items: []}

newOrder 对象中的项目属性应该等于订单，但它仍然是空的

如何将订单数据正确传递到商品中属性？

只是为了清关，这是从 redux 操作中获取的函数

export const fetchOrder = setOrders => dispatch => {
    fetch("/api/orders")
        .then(res => res.json())
        .then(data => {
            setOrders(data);
            dispatch({ type: FETCH_ORDER, payload: data });
        });
};

谢谢你，祝你有愉快的一天

Answer 1

只要 orders 更新，您就需要更新 columns。为此，您需要在代码中添加另一个 useEffect 挂钩，如下所示。

useEffect(() => {
    setColumns(prevState => {
        return {
            ...prevState,
            x: {
                ...prevState.x,
                items: orders
            }
        };
    });
}, [orders]);

如何使用 React Hooks 和 Redux 将数据传递给对象

How can I pass data to an object using React Hooks and Redux

object

reactjs

redux

react-hooks