0

父组件中的函数在 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?"
    }
]
4

2 回答 2

0

你打错了，修复你的代码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>
  }
于 2018-07-23T16:10:07.060 回答
0 
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渲染方法，它将更新组件。

  2. state从 props设置组件的 并state从 componentWillReceiveProps.

于 2018-07-23T16:48:32.913 回答