react setState Hook 并不总是更新 object

Question

Hi I am using a setState Hook with useContext to to update/overwrite a Json object. setState is used in a GET API call and the data returned is used to update my state, the state will update initially then will not update again.

The initial state looks like so: This is also the shape of the data that will be returned from the database.

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

This is where the setState is called, it does update but if called again after the first time it updates infrequently, I know the function is being called as I have run a console.log next to the setNewsArticlesJson() hook.

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 }
}

Where the component is called:

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>
  )
}

Answer 1

I have identified that that reason for my error is with a library called react-quill using the output of this setState as I am setting the data its is causing a rerender on the onchange function when it should not, I am currently unaware how to fix this issue. but have identified the cause