

クラスコンポーネントから関数コンポーネントへ変換する際に、クラスコンポーネントそのものを指す"this"キーワードをどのように関数コンポーネントで記述すればよいか分からず困っております。

下記のようなnotificetion.jsがあったとし、

[code]

    let instance = null;
    
    class Notification {
      constructor() {
        if (!instance) {
          instance = this;
        }
        return instance;
      }
    
      addObserver = (name, observer, callback) => {
        let obs = observers[name];
        if (!obs) {
          observers[name] = [];
        }
        let obj = { observer: observer, callback: callback };
        observers[name].push(obj);
      };
    }
    
[/code]

これをもともとitemlist.jsにおいて

[code]

    let ntf = new Notification();
    class itemList extends Component{
      constructor(props{
        super(props);
        this.state = {itemList:[]}
    
      })
    
      componentDidMount(){
    　　//この2番目の引数であるthisについて
        ntf.addObserver("List Changed",this,this.onItemListChanged)
      }
    
      onItemListChanged(newItemList){
        this.setState({itemList:newItemList})
      }
    }
    
[/code]

のような形で使用していたとします。  
このitemlist.jsを下記のように変換して使用したいです。

[code]

    let ntf = new Notification();
    function WishList(props) {
      const [itemList, setitemList] = useState([]);
      useEffect(() => {
        //thisキーワードの扱い
        ntf.addObserver("List Changed",this,this.onItemListChanged)
      });
      
      const onItemListChanged = (newItemList) => {
        setWishList(newItemList);
      };
    }
    
[/code]

このような形でそのまま実行してもエラーとなるため、困っております。どのようにすればクラスから関数へ変えることができるでしょうか。  
よろしくお願いいたします。


CC BY-SA 4.0
2021-04-24T06:43:35.753
75485
2021-04-24T06:43:35.753
30396
question
javascript reactjs
reactにおけるクラスコンポーネントと関数コンポーネント間でのthisキーワードの変換