状态更改，但子组件未重新呈现

Question

更改Head组件的输入文本时，将调用父组件中的功能

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

然后它更改状态并将其传递给NewsList的第三个组件

但是NewsList组件不会重新呈现

目标是从Head Component获取关键字。在JSON文件中搜索关键字以找到匹配的数据，并将状态设置为匹配的数据，并将此状态作为props传递给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

您输入错误，请在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>
  }

Answer 2

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

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

1. 从constructor删除上述代码，并在render方法中添加props.news.map ，它将更新组件。

2. 从props设置组件的state ，并从componentWillReceiveProps更新state 。