Reactjs 反应,标记maxTags不更新

Reactjs 反应,标记maxTags不更新,reactjs,tags,react-lifecycle-hooks,Reactjs,Tags,React Lifecycle Hooks,在我的react应用程序中,我有一个标记栏。maxTags属性取决于用户输入。目前为止,我有: import React, { useRef, useState, useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import Tags from "@yaireo/tagify/dist/react.tagify"; import './SearchBar.css

在我的react应用程序中,我有一个标记栏。maxTags属性取决于用户输入。目前为止,我有:

import React, { useRef, useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import Tags from "@yaireo/tagify/dist/react.tagify";
import './SearchBar.css';
...some more  consts and such 

export function SearchBar() {
  const [booru, setBooru] = useState(DEF_BOORU);
  const createBaseTagSettings = (maxTags: number) => {
    return {
      maxTags: maxTags,
      placeholder: "type something",
    }
  }

  const [baseTagifySettings, setbaseTagifySetting] = useState(createBaseTagSettings(booruTagLimit[DEF_BOORU]));

  const tagifyRef: any = useRef();
  const addCallBack = (e: any) => {
    baseTagifySettings.placeholder = "";
  }

  const tagifyCallbacks = {
    add: addCallBack
  }

  const settings = {
    ...baseTagifySettings,
    callbacks: tagifyCallbacks
  }
      
  const onBooruChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const booru = e.target.value;
    if (BOORUS.indexOf(booru) != -1) {
      setBooru(booru);
      setbaseTagifySetting(createBaseTagSettings(booruTagLimit[booru]));    
    }
  }
  const onTagChange = (e: any) => {
   e.persist();
   console.log(e.target.value);
  }

  console.log("prior to return", settings);
  
  //omitting alot of excess html stuff here.
  return (
    <div>
              <Tags
                tagifyRef={tagifyRef}
                settings={settings}
                onChange={onTagChange}
              />
            
            <div className="col-md-2">
              <select id="booru" className="custom-select custom-select-sm"
                onChange={onBooruChange}>
                <option selected>Select Booru to use</option>
                {
                  BOORUS.map((booru: string) => {
                    return <option value={booru}>{booru}</option>
                  })
                }
              </select>
            </div>
           
    </div >

  );
}
当我尝试从DEF_BOORU选项切换到其他具有更高maxTags编号的选项时,tagify搜索栏会自动删除maxTgas似乎要更新的多余标记。但是,在返回之前的log语句显示了具有正确maxTags属性的正确设置对象

有人知道为什么会这样吗?请注意,如果我尝试使用TagifRef更改maxTags,它会起作用