Reactjs React Hook update不更改子组件'；s风格

我试图解决这个问题已经有几个星期了，只是不明白到底出了什么问题。我想切换按钮的背景色。我的组件级别为App-->LabAssign-->测试。我正在用以下内容更新应用程序中获取的数据：

setFetchedSamples(fetchedSamples.map(sample => sample.labid === id ? {...sample, status: newStatus, [field]: newTestStatus} : sample))

然后重新渲染组件LabAssign：

import React from 'react'
import Test from 'Components/Buttons/Test'
import Icon from 'Components/Buttons/Icon'

const AssignLab = (props) => {

  let sample = props.sample
  let unassigned = '#d3d3d3d'
  let assigned = props.view === 'normal' ? '#ED4A56' : 'dodgerblue'
  let reviewed = 'black'
  let completed = 'gray'
  let started = 'yellow'

  let testDetails = [    
    {
      id: sample.labid,
      name: 'ac sa',
      field: 'statusacsa',
      status: sample.statusacsa,
      colorStatus: sample.statusacsa === 'reviewed' ? reviewed : sample.statusacsa === 'completed' ? completed : sample.statusacsa === 'started' ? started : sample.statusacsa === 'assigned' ? assigned : unassigned,
      colorNormal: sample.statusacsa === null || sample.statusacsa === '' ? unassigned : '#EDB84A' //orange
    },
    {
      id: sample.labid,
      name: 'av',
      field: 'statusav',
      status: sample.statusav,
      colorStatus: sample.statusav === 'reviewed' ? reviewed : sample.statusav === 'completed' ? completed : sample.statusav === 'started' ? started : sample.statusav === 'assigned' ? assigned : unassigned,
      colorNormal: sample.statusav === null || sample.statusav === '' ? unassigned : '#EDB84A' //orange
    }
  ]

  let i = 0
  let tests = testDetails.map((test) => {
    i++

    return(
      <Test key={i} test={test} view={props.view} isTodo={props.isTodo} onClick={props.onClick} />
    )
  })

  return (
    <span>
      {tests}      
    </span>
  )
}

export default AssignLab

代替

style={style}

在三元回归测试中，它会改变颜色。有什么能解释为什么React在新道具传下来时不重新渲染背景色

此外，如果测试最初是“未分配”的，我单击它，它会将背景颜色从“灰色”更改为“红色”，但如果我再次单击它，它将不会更新。如果我单击一个已分配的测试，并且背景颜色为“红色”或其他颜色，它将不会更改

style = {{backgroundColor: 'purple'}}

style={style}