React-更新state的数据，dom没有重新渲染

关注

原创最新推荐文章于 2026-03-01 18:26:28 发布 508 阅读 AI 写同款· GEO 优化 ›

React 源码分析 - setState() 之后没有重新渲染的问题原因与解决方法问题背景假设我们正在开发一个让用户填写的表单，比如说登录页面的账号密码表单。 return ( <form> <p>账户:</p> <input type="text" name="firstname"><br> <p>密码</p> <input type="password" n... 阅读详情

{entourageList.map((person) => (
  <Row key={person.id}>  {/* 使用唯一的 person.id */}
    <Col span={16}>
      <Row gutter={16}>
        <Col lg={9} md={18} sm={24}>
          <FormItem label={'姓名'}>
            {getFieldDecorator(`name-${person.id}`, {
              initialValue: person.name,
              rules: [
                {
                  required: false,
                  whitespace: true,
                  message: formatMessage({ id: 'common_msg_no_name' }),
                },
              ],
            })(<Input maxLength={20} />)}
          </FormItem>
        </Col>
        <Col xl={{ span: 9, offset: 3 }} lg={{ span: 12 }} md={{ span: 18 }} sm={24}>
          <FormItem label={'手机号'}>
            {getFieldDecorator(`mobile-${person.id}`, {
              initialValue: person.mobile,
              rules: [
                {
                  required: false,
                  pattern: new RegExp('^(1)\\d{10}$'),
                  message: formatMessage({ id: 'common_msg_phone_err2' }),
                },
              ],
            })(<Input maxLength={11} />)}
          </FormItem>
        </Col>
      </Row>
    </Col>
    <Col span={3} style={{ marginLeft: 10 }}>
      <FormItem label={'照片'}>
        {getFieldDecorator(`featurePhoto-${person.id}`, {
          initialValue: person.featurePhoto && person.featurePhoto.length > 0 ? [person.featurePhoto] : [],
        })(
          <UploaderPictureWall
            limit={1}
            onAdd={onAddFileList2}
            onDelete={onDeleteFileList2}
            index={person.id}  // 使用唯一的 id
            multiple
          />,
        )}
      </FormItem>
    </Col>
    <Col span={3} style={{ marginLeft: 10 }}>
      <FormItem label={<div style={{ opacity: 0 }}>占位</div>}>
        <Button
          type="primary"
          onClick={handleAddPerson}
          disabled={entourageList.length >= 5}
        >
          添加
        </Button>
        <Button
          style={{ marginLeft: 10 }}
          type="primary"
          onClick={() => handleDeletePerson(person.id)}  // 使用 person.id 作为删除依据
          disabled={entourageList.length <= 1}
        >
          删除
        </Button>
      </FormItem>
    </Col>
  </Row>
))}

state的entourageList数据改变，dom没有重新渲染导致页面显示与state数据不一致。解决办法：加上唯一的key值如下：<Row key={person.id}> {/* 使用唯一的 person.id */}