React:How 向模式提交数据？

Question

我正在创建工作列表。在此工作列表中，我们有一个按钮可以打开模式以输入工作的详细信息。但是，当我将具有默认值的默认作业对象传递给模态时，模态无法显示默认作业值。

因为一些默认属性来自远程 API，所以在 JobList 组件中，我使用 useEffect 挂钩从远程 API.

检索数据

你能告诉我发生了什么事吗？

我的代码驻留在here.

Answer 1

也许你可以使用像 Redux/React 上下文这样的状态管理来将值传递给你的模态

Answer 2

我检查了你的代码，有一个逻辑错误。

您需要在 JobList.js 中的 addJob case 语句后添加 break;。

因此，defaultJobObj 正在重新初始化为未定义的对象。

-- 添加 --

您需要在 JobForm 组件中处理 defaultJobObj 道具更新。

您可以定义一个钩子并在 reducer 中重新初始化 items。

let reducer = (state, action) => {
    let result = { ...state };
    switch (action.type) {
      case "reinit":
        result.job = defaultJobObj;
        break;
      default:
        break;
    }
    return result;
  };

  useEffect(() => {
    updateItems({
      "type":"reinit"           
    })
  }, [defaultJobObj])

React:How 向模式提交数据？

React:How to submit data to a modal?

reactjs

bootstrap-modal