状态改变但子组件不会重新渲染

Question

父组件中的函数在Head组件的输入文本发生变化时被调用

该函数从 JSON 文件中获取数据并搜索从 Head 组件接收到的关键字

然后它改变状态并将其传递给第三个组件，即 NewsList

但 NewsList 组件不会重新渲染

目标是从 Head 组件获取关键字 在 JSON 文件中搜索关键字查找匹配数据并将状态设置为匹配数据并将此状态作为道具传递给 NewsList 组件并渲染 NewsList 组件以显示此新数据

这是父组件

import React from 'react';
import ReactDOM from 'react-dom';
import JSON from './db';
import Header from './components/header';
import Newslist from './components/newslist';


class Test extends React.Component{

  state = {
      news: JSON,
      filtered:[]
    }

   getKeyword(event){
    let keyword = event.target.value;
    let filtered = this.state.news.filter((item)=>{
        return item.title.indexOf(keyword) > -1;
    });

    console.log(filtered);
    this.setState({filtered})
    console.log(this.state.filtered);


  }


  render(){
    return (
      <div>
      <Header keyword={this.getKeyword.bind(this)}/>
      <Newslist news={this.state.filtered.length === 0 ? this.state.news : 
       this.state.filtered} />
      </div>
    );
  }
}

let cont = document.getElementById('root');
ReactDOM.render(<Test/>, cont);

这是第一个子组件的代码

import React from 'react';

const Header = (props) =>{

    return(
      <div>
        <h3 className="text-center text-primary">Welcome To News Search</h3>
        <input type="text" onChange={props.keyword} id="ipt" className="form- 
        control" placeholder="Search for Keyword"/>

      </div>
    );

}
export default Header;

这是第二个子组件的代码

import React from 'react';


export default class Newslist extends React.Component{

  constructor(props){
    super();
    this.items = props.news.map((item)=>{
      return(
        <div key={item.id}>
          <h3>{item.title}</h3>
          <p>{item.feed}</p>
        </div>
      );
    })
  }



  render(){
    return(

      <div className="container">
        <h1>news List</h1>
        {this.items}
      </div>

    );
  }

}

这是 JSON 文件

[
{
    "id": 1,
    "title": "New ES6 upgrade available",
    "feed": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto"
},
{
    "id": 2,
    "title": "The importance of REACT in the development",
    "feed": "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident"
},
{
    "id": 3,
    "title": "REACT developers going on strike",
    "feed": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
},
{
    "id": 4,
    "title": "Say something again please",
    "feed": "Ut enim ad minima veniam, quis nostrum exercitationem ullam 
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis 
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil 
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla 
pariatur?"
    }
]

Answer 1

this.items = props.news.map((item)=>{
      return(
        <div key={item.id}>
          <h3>{item.title}</h3>
          <p>{item.feed}</p>
        </div>
      );
    })

有几种方法可以做到这一点

1. 把上面的代码从constructor中去掉，在里面加上props.news.map render 方法，它会更新组件。

2. 从 props 中设置组件的 state 并更新 state from componentWillReceiveProps.

Answer 2

您打错字了，请在Newslist 中修复您的代码：

constructor(props){
    // fix here
    super(props);
    // ...
}

更新： 您可以更新组件渲染功能：

render() {
    return <div className="container">
      <h1>news List</h1>{
        this.props.news.map((item) => {
          return (
            <div key={item.id}>
              <h3>{item.title}</h3>
              <p>{item.feed}</p>
            </div>
          );
        })
      }
    </div>
  }