Saya memiliki kumpulan data yang jauh lebih besar daripada contoh di bawah ini. Saya mencoba menambahkan catatan ke profil, namun, ada jeda yang relatif besar antara pengetikan dan teks yang muncul di area teks. Saya berasumsi ini terjadi karena harus melalui banyak data. Apakah ada cara yang lebih efisien untuk melakukan ini.

Data

const profiles = [{
  firstName: 'Brady',
  lastName: 'Smith'
}, {
  firstName: 'Jason',
  lastName: 'Brady'
}, {
  firstName: 'Michael',
  lastName: 'Bolten'
}];

Komponen

class Notes extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      profiles: []
    };
    this.handleAddingUserNotes = this.handleAddingUserNotes.bind(this);
  }

  handleAddingUserNotes(e, userId) {
    const { profiles } = this.state;

    const addNotesToProfiles = profiles.map(profile => {
      if (profile.userId === userId) {
        profile.notes = e.target.value;
      }
      return profile;
    });

    this.setState({ profiles: addNotesToProfiles });
  }

  render() {
    const { profiles } = this.state;

    return (
      <div>
        {profiles.map(profile => {
          const { userId, notes } = profile;

          return (
            <textarea
              className="form-control"
              value={notes}
              onChange={e => this.handleAddingUserNotes(e, userId)}
            />
          );
        })}
      </div>
    );
  }
}
2
bp123 14 Agustus 2019, 07:56

1 menjawab

Jawaban Terbaik

Anda dapat meneruskan indeks profil untuk diperbarui di pengendali perubahan dan kemudian langsung memperbarui profil itu.

// in your render method
{profiles.map((profile, index) => {
          const { userId, notes } = profile;

          return (
            <textarea
              className="form-control"
              value={notes}
              onChange={e => this.handleAddingUserNotes(e, index, userId)}
            />
          );
        })}

// in your handle change
handleAddingUserNotes(e, index, userId) {
    const { profiles } = this.state;

    const newProfiles = [...profiles.slice(0, index), {...profiles[index], notes: e.target.value}, ...profiles.slice(index+1)]

    this.setState({ profiles: newProfiles });
  }

Atau, jika Anda memiliki userIds unik untuk setiap pengguna, Anda dapat mengubah seluruh array menjadi objek di mana setiap pengguna diindeks oleh userId dan kemudian secara langsung memperbarui pengguna tersebut di objek userProfiles. O(1) operasi.

Sunting: Dan ya, seperti yang disebutkan oleh jawaban lainnya, harap gunakan key dengan setiap textarea Anda sehingga reaksi tidak merender setiap area teks pada setiap render.

1
Mukesh Soni 14 Agustus 2019, 06:12