如何使用 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

订单 = []

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

第二次

orders = (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 });
        });
};

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

Answer 1

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

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