javascript - React Context - 设置状态然后直接引用它?

标签 javascript reactjs state

我正在处理一个项目列表,我想设置一个选定的项目 ID,然后使用该 ID 获取选定的项目。

我正在使用有效的 reducer 更新上下文的状态,但是当引用状态的属性时,它看不到更新的值。

Component.js

  useEffect(() => {
    setSelectedId(5);
    getSelectedItem();
  }, []);

Context.js

  const initialState = {
    selectedId: 0,
  };

  const [state, dispatch] = useReducer(ItemReducer, initialState);

  const setSelectedId = id => dispatch({ type: SET_SELECTED_ID, payload: id });

  // HERE IT THINKS 'state.selectedId' IS 0
  const getSelectedItem = async () => {
     const selectedItem = await fetch(url + state.selectedId);
  };

Chrome dev tools

Chrome 开发工具显示 selected id 属性已更新为 5,但 getSelectedItem 函数将“selectedId”视为 0 而不是 5。

这可能是一个简单的问题,我们将不胜感激。

谢谢

最佳答案

您需要解决将返回的 promise 。像这样的东西:

useEffect(() => {
    setSelected(5).then(getSelectedItem());

  }, []);

关于javascript - React Context - 设置状态然后直接引用它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59570501/

相关文章:

javascript - 使用 p5.js 在路径上移动对象

reactjs - React - 使用相同的值更新组件的状态会触发渲染

javascript - 为什么 Native DOM 事件总是重置 React 组件状态

reactjs - Flutter中 `componentDidMount()`的等效项是什么

scheme - SICP 第 3.1.1 节 - 程序中的本地状态似乎不一致

javascript - 退出 Javascript 中的函数。简单的石头剪刀布游戏

javascript - 从 UIWebView 隐藏元素

reactjs - 使用钩子(Hook)从数组中删除对象(useState)

java - 您能否提供讨论使用资源状态而不是 session 或数据库状态的信息或链接?

javascript - jAlert 和 jConfirm 无法正常工作