React不会在道具变更时重新渲染

Question

I am kinda new to react and to the webitself.

this is my render function

    render() {
    const {repositories} = this.props

    return (
        <div className='mt4 bt b--black-20 boardingbox scrollarea-content' style={{overflow: 'scroll', height: '100vh'}}>
            {
                repositories.map((repo, index) => {
                    console.log(repo.name)
                    return <Note name={repo.name} desc={repo.name} key={index} onClick={ this.handleClick.bind(this) }/>
                })
            }
        </div>
    )
}

The repositories is changing the way I want, but for some reason the its not get re-rendered. I passing the repositiores property from the parent.

The first time I render it (click to the search button, get a response from the server, and set the repo array), its working fine. But at the 2nd search, when there is something in the array, its not working properly, and not re-render.

UPDATE:

The parent's render / onClick

render() {
    const {repositories} = this.state
    return (
      <div className='w-third navpanel br b--black-20'>
        <SearchBar onClick={this.onClick} onChange={this.onChange}/>
        <RepoList repositories={repositories}/>
      </div>

      //<NewNote />
      //<Tags />
      //<NoteList />
    );
}

onClick = (event) => {
    const {searchTerm} = this.state

    let endpoint = 'https://api.github.com/search/repositories?sort=stars&order=desc&q=' + searchTerm;
    fetch(endpoint)
        .then(blob => blob.json())
        .then(response => {
            if(response.items)
              this.setState({ repositories: response.items });
        })
}

UP-UPDATE:

Search Comp:

constructor({onClick, onChange}) {
super()
this.onClick = onClick
this.onChange = onChange
this.state = {
  imageHover: false
}}

render() {
return (
  <div className='flex items-center justify-between bb b--black-20'>
    <div className='ma2 inputContainer w-100'>
      <input className='pa1 pl4 boardingbox w-100 input-reset ba b--black-20 br4 black-50 f6' placeholder='repos' type="text" onChange={this.onChange}/>
    </div>
    <div className='mr2'>
      <div className='boardingbox pointer contain grow'>
        <img src={(this.state.imageHover) ? NoteImageOnHover : NoteImage} alt=''
          onMouseOver={()=>this.setState({imageHover: true})}
          onMouseOut={()=>this.setState({imageHover: false})}
          onClick={this.onClick}/>
      </div>
    </div>
  </div>
)}

first responde

second responde

Answer 1

The root cause most probably is due to error in function binding.

In your SearchComponent you are using the "props" to create function bindings in the contructor . This can cause your SearchComponent to refer to wrong instance of the functions for onClick and onChange . Would suggest referring to the official documentation for more details.

you do not need to rebind the functions in your SearchComponent , you can just use the functions received in props .

  <input className='pa1 pl4 boardingbox w-100 input-reset ba b--black-20 br4 black-50 f6' placeholder='repos' type="text" onChange={this.props.onChange}/>
  <!-- snipped other irrelevant code -->
    <img src={(this.state.imageHover) ? NoteImageOnHover : NoteImage} alt=''
      onMouseOver={()=>this.setState({imageHover: true})}
      onMouseOut={()=>this.setState({imageHover: false})}
      onClick={this.props.onClick}/>

Why could be happening to cause this behavior Remember, constructor is only called once the component instance is being constructed, once it has been created and remains alive, React lifecycles take over.

So, when you first render your screen, the component is created and since there is only 1 of everything, it kind of works. When you run your first search: onChange/onClick callbacks modify the state of the parent component. Which then calls render on the parent component.

At this point, it is possible that your SearchComponent maybe holding on to the wrong instance of the call back methods, which would thus not set state on the parent and thus not force re-render.

Additional Notes on your constructor

Normally you shouldn't refer to props in your constructor, but if you need to, then you need to have it in the format below. Here are the relevant docs :

constructor(props) {
   super(props);
   // other logic
}

Answer 2

and I am really ashamed that I could screw up like this. So basicly the problem was:

return <Note name={repo.name} desc={repo.name} key={index} onClick={ this.handleClick.bind(this) }/>

So I was as stupid to use INDEX as a KEY so I could not add again the same key to the array.

Thanks anyway guys! :)