时间戳

首页 > 解决方案 > 当我删除一些内容并改变状态时，我的输入值没有改变

reactjs - 当我删除一些内容并改变状态时，我的输入值没有改变

问题描述

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

{career.map(toCareerAndEducation)}

地图功能

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

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

创建内容

这是状态日志

状态日志

然后我删除了第二个

删除第二个内容

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

但是，在状态日志中，第二个元素被很好地删除了，

日志

我想查看 apear 就像状态一样我该怎么做？？？

标签： reactjstypescript

解决方案

你永远不应该修改 React 中的状态对象。这是框架的基本属性，您应该阅读文档。https://reactjs.org/docs/state-and-lifecycle.html#using-state-correctly。

在这种情况下，我认为职业是您的状态，您直接在处理程序中对其进行修改，这会导致错误career[index].companyName = event.target.value

推荐阅读