Javascript 重新执行状态更改后重新渲染组件不工作？

我正在利用图书馆建立一个小项目。此库使您能够使用对象创建自己的流程图。对象可以有自己的字段，如文本框、开关和下拉列表

这个库是如何工作的？

该库具有以下react组件

<FlowMaker
  logic={{
    introComponents: [],
    components: [],
  }}
  onChange={data => localStorage.setItem('flowMakerExample', JSON.stringify(data))}
  flow={JSON.parse(localStorage.getItem('flowMakerExample'))}
/>

• onChange

  ->当用户更改某个内容时，返回流数据

• flow

  ->在这里，您可以添加一个流来显示何时安装图形，如果您从屏幕上删除了组件或图形需要持久化，这将非常方便

我的目标：

使用下拉菜单创建一个块，通过API获取项目列表，并将它们作为标题和值放入下拉菜单中

如果用户更改了图表中的某些内容，请执行新的获取并更新下拉列表的选项

我实现了一个GET请求，返回以下JSON列表：

[
{“name”：“name_0”，“sid”：“0”}，
{“name”：“name_1”，“sid”：“1”}，
{“name”：“name_2”，“sid”：“2”}，
{“name”：“name_3”，“sid”：“3”}
]

Logic.js此文件包含FlowMaker组件中使用的逻辑。在这里，我将

应用程序

映射到dorpdown中使用的选项的正确格式

    const Logic = async (applications, ..., ...) => {
      return {
        introComponents: [
          'hello-world'
        ],
    
        components: [
          {
            name: 'hello-world',
            title: 'hello world',
            tooltip: 'This is hello',
            inputs: [
              ...
              {
                name: 'applicationName',
                title: 'Application name',
                type: 'dropdown',
                options: [
                  ...applications.map(app => (
                    {title: app.name, value: app.name + ' - ' + app.sid})
                  )
                ]
              },
              ...
            ],
            next: 'hello-world'
          },
          ...
        ]
      }
    }
    export default Logic;
    

drawerReducer.jsmy reducer，我在其中初始化此抽屉的新状态

const initialState = {
    logic: null,
    data: null,
    applications: [],
    ...
}

const drawerReducer = (state = initialState, action) => {
    switch(action.type) {
        case LOGIC:
            return {
                ...state, 
                logic: action.payload
            }
        case DATA:
            return {
                ...state,
                data: action.payload
            }
        case APPLICATIONS: 
            return {
                ...state,
                applications: action.payload
            }
        ...
        default:
            return state;
    }
}

export default drawerReducer;

drawerAction.js包含获取新应用程序、设置新数据和逻辑的操作

。。。
从“../utils/Logic”导入逻辑
从“/types”导入{逻辑，应用程序，…，数据}
export const setLogic=（应用程序，…）=>dispatch=>{
逻辑（应用程序，…）
.然后（newLogic=>dispatch({
类型：逻辑，
有效载荷：newLogic
}))
}
export const setData=（newData）=>dispatch=>{
派遣({
类型：数据，
有效载荷：新数据
})
}
export const setApplications=（）=>dispatch=>{
应用程序列表（）
。然后（新应用程序=>dispatch({
类型:申请,，
有效载荷：新的应用程序
}))
} 
...

drawing.js在这里，我放置了FlowMaker组件，并将所有内容整合在一起。您可以看到，我正在使用useEffect挂钩更新应用程序，然后在数据属性更改时更新逻辑

import React，{useffect}来自“React”
从“FlowMaker”导入FlowMaker
导入“../styles/flowmaker.css”
从“../utils/Loader”导入加载程序
从“../actions/drawerAction”导入{setApplications，setData，setLogic}
从“react redux”导入{connect}
常量抽屉=（{logic，data，applications，doSetLogic，doSetData，doSetApplications}）=>{
useffect（（）=>{
doSetApplications（）//分派新的应用程序
doSetLogic（applications）//调度以使用新获取的应用程序设置新逻辑
return（）=>{
//清理
}
}，[数据]）
返回(
{逻辑？
doSetData（新数据）}
流={data}
/>
: 
}
)
}
常量mapStateToProps=状态=>({
逻辑：state.drawer.logic，
数据：state.drawer.data，
应用程序：state.drawer.applications，
...
})
const mapDispatchToProps={
doSetLogic:setLogic，
doSetData:setData，
剂量应用：设置应用，
...
}
导出默认连接（mapStateToProps、mapDispatchToProps）（抽屉）

我的问题 我的问题是，当点击useEffect数据依赖项时。当Redux中的逻辑状态发生更改时，该关系图不会将我的关系图中的新应用程序选项重新呈现为新选项

这是执行数据更改操作之前的逻辑状态。您可以看到选项是一个空列表

现在，我在图表中添加了一个新块。这意味着数据操作将启动，新数据将被设置为数据，接下来由于依赖性[data]触发useEffect，并使用新逻辑设置逻辑，这意味着applicationName下拉列表必须填充新选项，这是正确的

现在完成了一个新的redux逻辑操作，我希望选项在那里，但它们不在那里，这很奇怪，因为在第二张图片中，您可以看到逻辑确实在更新。

结束；我的问题是如何使用新设置的Redux状态重新渲染此组件？我认为，当您更改redux状态时，会像setState一样自动触发重新渲染。对这个问题有什么看法吗

---

我知道这是大量的文本/代码/图片，对此我很抱歉，我只是没有更好的主意如何做，否则。

在您的useEffect中，您似乎正在调度要使用更新状态的操作，但是状态更新不是立即的，并且受闭包的影响

您需要将该逻辑拆分为另一个useEffect

useEffect(() => {
    doSetApplications() //dispatch new applications
}, [data]);

useEffect(() => {
  if(applications) {
    doSetLogic(applications) //dispatch to set the new logic with the newly fetched applications
  }
}, [applications]);

---

从本周起，我使用了一个新的更新。此更新使使用getInputs函数在特定数据更改时重新呈现组件项成为可能。在main.js文件中，有一个关于此的示例逻辑

{
名称：“前端”，
工具提示：“有关代理/负载平衡服务器的信息”，
标题：“前端”，
获取输入（信息）{
const isHttpsInputs=info.inputs.https[
{
名称：“sslCert”，
标题：“添加ssl证书”，
工具提示：“添加ssl证书”，
类型：'开关'，
默认值：true，
}
] : [];
返回[
{
名称：'服务器'，
标题：“服务器”，
键入：“文本”，
工具提示：“代理/负载平衡服务器的地址”，
验证：domainCheck，
}, {
na