时间戳

首页 > 解决方案 > 如何使用 React Hooks 和 Redux 将数据传递给对象

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

问题描述

我正在尝试使用 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);

结果是页面呈现两次，在它显示的控制台中，冷杉

订单 = []

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

在第二次

订单 = (39) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{… }、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、 {…}、{…}、{…}]

列 = {newOrder：项目：[]}

newOrder 对象内的 items 属性应该等于 orders，但它保持为空

如何将正确的订单数据传递到 items 属性？

只是为了清除，这是来自 redux 操作的 fetch 函数

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

谢谢你，祝你有美好的一天

标签： reactjsobjectreduxreact-hooks

解决方案

columns每当更新时，您都需要orders更新。为此，您需要useEffect在代码中添加另一个钩子，如下所示。

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

推荐阅读