Javascript 反应设置状态挂钩不'；不总是更新对象

嗨，我正在使用带有useContext的setState钩子来更新/覆盖Json对象。setState用于GET API调用，返回的数据用于更新我的状态，状态最初会更新，然后不会再次更新

初始状态如下所示： 这也是将从数据库返回的数据的形状

这是调用setState的地方，它确实会更新，但如果在第一次不经常更新后再次调用，我知道该函数正在被调用，因为我在setNewsArticlesJson（）钩子旁边运行了一个console.log

其中组件被称为：

export const ArticleEdit=（）=>{
const newsArticleJson=useContext（NewsArticlesContext）
const setNewsArticlesJson=useContext（NewsArticlesSetContext）
const newsArticleList=useContext（NewsArticlesEditListContext）
常量{getArticles，getArticle}=getArticles（）
const[editArticle，setEditArticle]=useState（'New'）
const[selectedArticle，setSelectedArticle]=useState（newsArticleJson.title）
const editArticles=（e:string）=>{
开关（e）{
“新”案例：
setEditArticle（“新”）
setNewsArticlesJson（{…NewsArticlesInitialState}）
setSelectedArticle（新闻文章列表[0]？.title）
打破
案例“编辑”：
setEditArticle（'Edit'）
getArticles（）
}
}
//调用导致问题的钩子的函数
const selectArticle=（e:any）=>{
const filteredArticles=新闻文章列表。过滤器（（d）=>
d、 标题===e？d:空
)
设置选定的项目（e）
getArticle（filteredArticles[0].id）
}
返回(
editArticles（e.target.value）}
>
{editArticle==='Edit'&&(
selectArticle（e.target.value）}
>
{newsArticleList.map（（数据，idx）=>{
返回(
{data.title}
)
})}
)}
)
}

我已经确定我的错误的原因是一个名为react quill的库使用了此setState的输出，因为我正在设置数据，它正在导致onchange函数上重新加载，而它不应该这样做，我目前不知道如何修复此问题。但是，请确认原因

同时发布部件代码。这可能有助于更好地理解问题。好的，我会更新我的帖子！看一看很酷，你也能发布一些结果吗？可能是一些控制台日志显示它有时工作，但其他时间不工作？代码似乎是正确的。尽管编程模式似乎太复杂。我猜

filteredArticles[0]

为空

export const NewsArticlesInitialState = {
  id: null,
  title: '',
  heroImage: '',
  summaryImage: '',
  thumbnail: '',
  summary: '',
  bodyHeading: '',
  body: '',
  steps: [],
  tags: [],
  date: null,
} as NewsArticlesJson

export const GetArticles = () => {
  const accessToken = useContext(AccessTokenContext)
  const setNewsArticlesJson = useContext(NewsArticlesSetContext)
      const getArticle = async (id: number | null) => {
        try {
          axios
            .get(`${NEWS_ARTICLE_ENDPOINT}/${id}`, {
              headers: {
                Authorization: 'Bearer ' + accessToken,
              },
            })
            .then((res) => {
              setNewsArticlesJson({ ...res.data })
            })
        } catch (err) {
          console.log(err)
        }
      }
 return { getArticle }
}

export const ArticleEdit = () => {
  const newsArticleJson = useContext(NewsArticlesContext)
  const setNewsArticlesJson = useContext(NewsArticlesSetContext)
  const newsArticleList = useContext(NewsArticlesEditListContext)
  const { getArticles, getArticle } = GetArticles()

  const [editArticle, setEditArticle] = useState('New')
  const [selectedArticle, setSelectedArticle] = useState(newsArticleJson.title)

  const editArticles = (e: string) => {
    switch (e) {
      case 'New':
        setEditArticle('New')
        setNewsArticlesJson({ ...NewsArticlesInitialState })
        setSelectedArticle(newsArticleList[0]?.title)
        break
      case 'Edit':
        setEditArticle('Edit')
        getArticles()
    }
  }

//funtions that calles the hook causing issues
  const selectArticle = (e: any) => {
    const filteredArticles = newsArticleList.filter((d) =>
      d.title === e ? d : null
    )
    setSelectedArticle(e)
    getArticle(filteredArticles[0].id)
  }

  return (
    <RiskEditContainer>
      <RadioGroup
        value={editArticle}
        onChange={(e) => editArticles(e.target.value)}
      >
        <FormControlLabel value="New" control={<Radio />} label="New Article" />
        <FormControlLabel
          value="Edit"
          control={<Radio />}
          label="Edit Article"
        />
      </RadioGroup>
      {editArticle === 'Edit' && (
        <Select
          value={selectedArticle}
          onChange={(e) => selectArticle(e.target.value)}
        >
          {newsArticleList.map((data, idx) => {
            return (
              <MenuItem key={idx + data.title} value={data.title}>
                {data.title}
              </MenuItem>
            )
          })}
        </Select>
      )}
    </RiskEditContainer>
  )
}