PubSub订阅未在ReactJS中执行 以下是日志行：组件B中的formik.setFieldValue：以下是日志无行：组件B中的formik.setFieldValue：

如何解决PubSub订阅未在ReactJS中执行 以下是日志行：组件B中的formik.setFieldValue：以下是日志无行：组件B中的formik.setFieldValue：

我正在尝试在ReactJS中实现pubsub（发布-订阅）。如果我添加了ComponentB中提到的以下行。

import os
import threading 
#import shutil
import tkinter as tk
from tkinter import *

def drivers(driver1,driver2):
    wait_time.cancel()  
    ra_config = open("F:\\Games\\RetroArch\\retroarch.cfg","rt")
    temp_data = ra_config.read()
    temp_data = temp_data.replace('video_driver = "' + driver1 + '"','video_driver = "' + driver2 + '"')
    ra_config.close()
    ra_config = open("F:\\Games\\RetroArch\\retroarch.cfg","wt")
    ra_config.write(temp_data)
    ra_config.close()
    os.startfile (r"F:\\Games\\RetroArch\\retroarch.exe")
    root.quit()

HEIGHT = 200
WIDTH = 700

root = tk.Tk()
root.title("Choose one")

screen_width = root.winfo_screenwidth()
screen_height = root.winfo_screenheight()

x_coordinate = (screen_width/2) - (WIDTH/2)
y_coordinate = (screen_height/2) - (HEIGHT/2)

root.geometry ("%dx%d+%d+%d" % (WIDTH,HEIGHT,x_coordinate,y_coordinate))

canvas = tk.Canvas(root,height=HEIGHT,width=WIDTH)
canvas.pack()

photo_vul = PhotoImage(file = r"img\\vulkan.png") 
photo_gl = PhotoImage(file = r"img\\opengl.png")
photo_icon = PhotoImage(file = r"img\\retroarch-icon.png") 

root.iconphoto(False,photo_icon)

#frame = tk.Frame(root,highlightbackground='black',highlightthickness=1,bd=10)
frame = tk.Frame(root,bd=10)
frame.place(relx = 0.5,rely=0.5,relwidth=0.95,relheight=0.95,anchor="c")

button = tk.Button(frame,bg='white',activebackground='white',image = photo_vul,font=60,command=lambda: drivers("glcore","vulkan"))
button.place(relx = 0.05,relwidth=0.4,relheight=1)

button2 = tk.Button(frame,bg='#0277bd',activebackground='#0277bd',image = photo_gl,command=lambda: drivers("vulkan","glcore"))
button2.place(relx = 0.55,relheight=1)

#create the vulkan config if the orig
#og = r"F:\\Games\\RetroArch\\retroarch.cfg"
#tg = r"F:\\Games\\RetroArch\\retroarch-vulkan.cfg"
#shutil.copyfile(og,tg)

#pyinstaller --noconsole --onefile RApicker.py

wait_time = threading.Timer(15.0,drivers,["vulkan","glcore"]).start()

root.mainloop()

对ComponentC的订阅无法正常工作。

以下是组件：

ComponentA

单击按钮时，发布带有有效内容（即项目）的事件。

formik.setFieldValue("items",[...formik.values.items,item])

ComponentB

侦听事件（如果有的话），将有效负载添加到formik表单值中的项目。项目从formik.values.items渲染到ui

import PubSub from 'pubsub-js';
import React from 'react';
import { Button } from 'react-native';

interface ComponentAProps {}

const ComponentA: React.FC<ComponentAProps> = ({}) => {
  return (
    <Button
      title="add items"
      onPress={() => {
           console.log('published')
           PubSub.publish('ADD_ITEMS',{ item: { title: 'someItem' } })
        }
      }
    />
  );
};

export default ComponentA;

组件C

它有作用。

import { useFormik } from 'formik';
import PubSub from 'pubsub-js';
import React,{ useEffect } from 'react';
import { Text,View } from 'react-native';

interface ComponentBProps {}

export interface IItem {
  title: string;
}

type IItems = IItem[];

interface IFormFields {
  items: IItems;
}

const ComponentB: React.FC<ComponentBProps> = ({}) => {
  const formik = useFormik<IFormFields>({
    initialValues: {
      items: [],},onSubmit(values) {
      console.log(JSON.stringify(values,null,2));
    },});

  useEffect(() => {
    console.log('mounted B');
    /**
     * add item to items
     */
    PubSub.subscribe('ADD_ITEMS',(item: IItem) => {
      /**
       * adding the following line prevents other subscribe callbacks to execute
       */
      formik.setFieldValue('items',item]);

      console.log('Item added to Items list');
    });
    return () => {
      console.log('unmounted B');
      PubSub.unsubscribe('ADD_ITEMS');
    };
  },[]);

  let renderItems = formik.values.items.map((item) => (
    <View>
      <Text>{item.title}</Text>
    </View>
  ));

  return <View>{renderItems}</View>;
};

export default ComponentB;

单击按钮3次。

以下是日志（行：组件B中的formik.setFieldValue）：

• 已安装B
• 已安装C
• 已发布
• 已将项目添加到“项目”列表
• 做点事情
• 已发布
• 已发布
• 已将项目添加到“项目”列表
• 已发布
• 已将项目添加到“项目”列表

以下是日志（无行：组件B中的formik.setFieldValue）：

• 已安装B
• 已安装C
• 已发布
• 已将项目添加到“项目”列表
• 做点事情
• 已发布
• 已将项目添加到“项目”列表
• 做点事情
• 已发布
• 已将项目添加到“项目”列表
• 做点事情