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

Question

我有点反应和对自己动手了。

这是我的渲染功能

    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>
    )
}

存储库正在改变我想要的方式，但是由于某种原因，它没有被重新渲染。 我从父级传递了repositiores属性。

我第一次渲染它（单击搜索按钮，从服务器获得响应，并设置存储库数组），它的工作正常。 但是在第二次搜索中，当数组中有东西时，它不能正常工作，也不会重新渲染。

更新：

父母的渲染/ 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 });
        })
}

更新：

搜索比较：

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>
)}

第一回应

第二回应者

Answer 1

根本原因很可能是由于函数绑定中的错误。

在SearchComponent您正在使用“ props”在构造函数中创建函数绑定。 这可能导致SearchComponent引用onClick和onChange函数的错误实例。 建议参考官方文档以获取更多详细信息。

您不需要重新绑定SearchComponent的功能，只需使用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}/>

为什么会发生这种现象，请记住，构造函数仅在构造组件实例后才被调用，一旦它被创建并保持活动状态，React 生命周期就会被接管。

因此，当您第一次渲染屏幕时，就创建了该组件，并且由于所有组件中只有1个，因此它可以正常工作。 当您运行第一个搜索时：onChange / onClick回调会修改父组件的状态。 然后调用父组件上的render 。

此时，您的SearchComponent可能会保留错误的回调方法实例，从而不会在父对象上设置状态，因此不会强制重新呈现。

有关构造函数的其他说明

通常，您不应该在构造函数中引用props ，但是如果需要，则需要使用以下格式。 以下是相关文档 ：

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

Answer 2

我为能这样搞砸感到非常really愧。 所以基本上问题是：

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

因此，我非常愚蠢地使用INDEX作为KEY，因此无法再次将相同的键添加到数组中。

谢谢大家！ :)