代码之家 › 专栏 › 技术社区 › Ahmed Bn

从zustand商店获取空数组

zustand jsx reactjs javascript

Ahmed Bn · 技术社区 · 1 年前

我正在尝试从zustand商店获取获取获取的数组,但返回时为空。

script.jsx

const store = Zstore();

const params = useParams();

useEffect(() => {
    store.fetchStock(params.id);
}, []);


console.log(store.stock); // Empty array

Zstore.js

import { create } from 'zustand';
import axios from 'axios';

const Zstore = create((set) => ({
    stock: [],

    fetchStock: async (id) => {
    
        const res = await axios.get('http://127.0.0.1:8000/searchList/')
        const stock = res.data.filter((stock) => stock.symbol == id.toUpperCase()).map((stock) => {
            return {
                symbol: stock.symbol,
                name: stock.name,
            }
        });
        set({stock});
                console.log(stock); // Array not empty
    },
}));

export default Zstore;

我确实试图添加 store.stock.length 作为对的依赖项 useEffect 但无济于事。

1 回复 | 直到 1 年前

Akalanka Dissanayake 1 年前

由于状态更改,您的组件似乎没有重新报价, 尝试以这种方式更新您的组件, 您的店铺选择应该如下const stock = Zstore(state => state.stock);

  const params = useParams();
  const stock = Zstore(state => state.stock);

  useEffect(() => {
    Zstore.getState().fetchStock(params.id);
  }, [params.id]);

  // This will re-render the component when `stock` changes, displaying the updated data.
  console.log(stock);

推荐文章

Get Off My Lawn · 如何让eslint选择具有特定类的className的jsx元素?

4 月前

masoud khanlo · axios实例的React useState问题

5 月前

The Noobest Guy · React状态显示奇怪行为

9 月前

John · 如何在提交事件后清除文本框的值?

11 月前

Ahmed Bn · 从zustand商店获取空数组

1 年前

skyewasthelimit · 如何使用<Link>执行类似JS React中的“window.location=”/GameOverDied“;”的操作?

1 年前

JarochoEngineer · 跳过某些元素映射通过对象

1 年前

XMehdi01 · 在React组件中显示与箭头相对应的标题和内容

1 年前

yahya kamran · 对象作为React子对象无效(找到:具有键{type,props}的对象)。如果要渲染子对象的集合,请改用数组

1 年前

Satyam Mishra · 使用相同道具更新两个组件

1 年前