javascript - 仅响应渲染更改

Question

需要呈现所有用户及其元素，例如姓名、姓氏、头衔。问题是当我使用 editUser 更新其中一些时，需要重新渲染当前用户而不是整个列表。

例如下面的代码...

import React, { Component } from 'react';


export default class Users extends Component {
  constructor(props) {
    super(props);
    this.editUser = this.editUser.bind(this);
  }

  editUser() {     
    const { id } = this.props.users;
    this.props.editUser(
      id, 
      this.nameInput.value, 
      this.lasnameInput.value, 
      this.titleInput.value
    );
  }

  render() {

    const { name, lastname, title } = this.props.users;

    return (
      <div key={this.props.index}>
        <span>{name}</span>
        <span>{lastname}</span>
        <span>{title}</span>
      </div>
    );
  }
}

Answer 1

为此，您需要为当前用户的数据创建一个小组件。React 将以这种方式重新渲染组件。

例如:

render() {
    return (

        this.props.users.map(({name, lastname, title}) => {
            <UserPresenter 
                key={lastname+name}
                name={name},
                lastname={lastName},
                title={title}
            />
        }
    );
}

并且你不应该在 React 中使用 index 作为 key 值