Reactjs 删除某些内容并更改状态时，我的输入值没有更改

职业是状态（对象数组类型）

映射函数

const toCareerAndEducation = (info: Career, key: number) => {
    return (
      <Wrapper key={key}>
        <Date>
          <DateInput figure={4} placeholder='yyyy'/>
              .
          <DateInput figure={3} placeholder='mm'/>
               ~
          <DateInput figure={4} placeholder='yyyy'/>
              .
          <DateInput figure={3} placeholder='mm' />
        </Date>
        <Content>
          <ContentInput fontSize={33} id={String(key)} placeholder='mainContent' onChange={handleOnMainContentChange} />
          <ContentInput fontSize={25} id={String(key)} placeholder='subContent' onChange={handleOnSubContentChange} />
        </Content>
        <DeleteButton id={String(key)} onClick={handleDleteButtonClicked}>
          <TrashCanIcon src={String(Trashcan)} />
        </DeleteButton>
      </Wrapper>
    )
  }

const to careerandeducation=（信息：职业，关键字：数字）=>{
返回(
.
~
.
)
}

事件处理程序

  const handleOnMainContentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const index: number = Number(event.currentTarget.id)
    career[index].companyName = event.target.value
  }

  const handleOnSubContentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const index: number = Number(event.currentTarget.id)
    career[index].role = event.target.value
  }

 const handleDleteButtonClicked = (event: React.MouseEvent) => {
    console.log('length: ' + career.length)
    const index: number = Number(event.currentTarget.id)
    console.log('inedx: ' + index)
    var temp: Career[] = [...career]

    temp.splice(index, 1)

    console.log(temp)

    setCareer(temp)
  }

const handleOnMainContentChange=（事件：React.ChangeEvent）=>{
常量索引：number=number（event.currentTarget.id）
职业[index].companyName=event.target.value
}
const handleonSubcentChange=（事件：React.ChangeEvent）=>{
常量索引：number=number（event.currentTarget.id）
职业[索引].role=event.target.value
}
const handleDeleteButtonClicked=（事件：React.MouseEvent）=>{
console.log（'length:'+career.length）
常量索引：number=number（event.currentTarget.id）
console.log（'inedx:'+索引）
变量临时值：职业[]=[…职业]
温度拼接（索引1）
控制台日志（临时）
职业（临时）
}

在这张图片中，我创建了3个内容并将其保存为默认值，然后更改输入值

这是状态日志

然后我删除了第二个

但在浏览器视图中，它看起来像删除第三个

但是，在状态日志中，第二个元素被完全删除

我想查看apear和state一样 我该怎么做呢？

您不应该在React中修改state对象。这是框架的基本属性，您应该阅读文档

在本例中，我假定职业是您的状态，您正在处理程序中直接修改它，这导致了错误

career[index].companyName=event.target.value

  const handleOnMainContentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const index: number = Number(event.currentTarget.id)
    career[index].companyName = event.target.value
  }

  const handleOnSubContentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const index: number = Number(event.currentTarget.id)
    career[index].role = event.target.value
  }

 const handleDleteButtonClicked = (event: React.MouseEvent) => {
    console.log('length: ' + career.length)
    const index: number = Number(event.currentTarget.id)
    console.log('inedx: ' + index)
    var temp: Career[] = [...career]

    temp.splice(index, 1)

    console.log(temp)

    setCareer(temp)
  }