Saya mencoba memfilter daftar percakapan berdasarkan nama peserta. Nama peserta adalah properti di dalam daftar peserta dan daftar peserta terdapat dalam daftar percakapan.

Sejauh ini, saya telah mendekati masalah dengan mencoba membuat filter sarang:

let filteredConvos = this.props.convos.filter((convo) => {
   return convo.conversation.conversation.participant_data.filter(
     (participant) => {
       return participant.fallback_name.toLowerCase().indexOf(
         this.state.searchTerm.toLowerCase()) !== -1;
     })
})

Ini tampaknya berfungsi, sejauh yang saya bisa konfirmasi (yaitu saya meletakkan sejumlah besar console.logs di seluruh versi yang diperluas di atas) bahwa ketika status searchTerm diperbarui, ia kembali cocok dengan participant dan convo yang cocok. Namun, filteredConvos tidak dirender dengan benar untuk mencerminkan larik yang baru difilter.

Saya baru mengenal Javascript, React, dan Stack Overflow. Penilaian terbaik saya adalah bahwa saya salah meneruskan item array yang difilter kembali ke filteredConvos, tetapi sejujurnya saya tidak memiliki cukup pengalaman untuk mengetahuinya.

Bantuan apa pun sangat dihargai.

Konteks lebih lanjut:

  • Sumber data yang saya kerjakan adalah file JSON yang disediakan oleh google dari obrolan Hangouts akun.
  • HangoutSearch.js:

    class HangoutSearch extends Component {
      constructor(props) {
        super(props);

        this.state = {
          searchTerm: ''
        };

        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(e) {
        this.setState({
          searchTerm: e.target.value
        });
      }

      render() {

        let filteredConvos = this.props.convos.filter((convo) => {
          return convo.conversation.conversation.participant_data.filter(
        (participant) => {
          return participant.fallback_name.toLowerCase().indexOf(
            this.state.searchTerm.toLowerCase()) !== -1;
        })
        })

        return(
          <div>
        <Form>
          <Form.Control
            placeholder='Enter the name of the chat participant'
            value={this.state.searchTerm}
            onChange={this.handleChange} />
        </Form>
        <HangoutList filteredConvos={filteredConvos}/>
          </div>
        );
      }
    }

    export default HangoutSearch;

  • Daftar Hangout.js

    class HangoutList extends Component {

      render() {
        return(
          <ListGroup>
            {this.props.filteredConvos.map((convo) => {
              return (
                <ListGroup.Item key={convo.conversation.conversation.id.id}>
                  {convo.conversation.conversation.participant_data.map(
                    (participant) => {
                      return (
                        <span key={participant.id.gaia_id}>
                          {participant.fallback_name}
                        </span>
                      )
                    }
                  )}
                </ListGroup.Item>
              )
            })}
          </ListGroup>
        );
      }
    }

    export default HangoutList;

2
almondmilk 27 Mei 2020, 23:42

1 menjawab

Jawaban Terbaik

Bagian dalam .filter selalu mengembalikan array, yang benar dalam Javascript. Anda bisa menggunakan .some sebagai gantinya:

let filteredConvos = this.props.convos.filter((convo) => {
  return convo.conversation.conversation.participant_data.some((participant) => {
    return participant.fallback_name.toLowerCase().indexOf( this.state.searchTerm.toLowerCase()) !== -1;
  })
})
1
cbr 27 Mei 2020, 21:18