Question

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

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

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

但是NewsList组件不会重新呈现

目标是从Head组件获取关键字在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>
      );
    })

有几种方法可以做到

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

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

2 个答案: