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属性。

我第一次渲染它（点击搜索按钮，从服务器获取响应，并设置repo数组），它的工作正常。但是在第二次搜索时，当数组中有某些东西时，它不能正常工作，而不能重新渲染。

更新：

父母的渲染/ 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：

搜索比较：

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

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

在SearchComponent中，您正在使用“props”在构造函数中创建函数绑定。这可能导致您的SearchComponent引用onClick和onChange的错误函数实例。建议您参考official documentation了解详情。

您无需重新绑定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 lifecycles将接管。

因此，当您第一次渲染屏幕时，会创建组件，因为只有1个，所以它的工作方式很有用。当您运行第一次搜索时：onChange / onClick回调修改父组件的状态。然后在父组件上调用render。

此时，您的SearchComponent可能会持有错误的回调方法实例，因此不会在父项上设置状态，因此不会强制重新呈现。

有关构造函数的其他说明

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

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

Answer 2

我真的很惭愧，我可以这样搞砸了。基本上问题是：

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

所以我使用INDEX作为KEY是愚蠢的，因此我无法再将相同的键添加到数组中。

无论如何，谢谢你！：）

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

2 个答案: