Javascript React组件在搜索激活后未刷新

我的react代码中有一个错误，我的结果组件在更改数组数据后没有更改，在控制台中我只看到更改输入后的新数组，新构建的数据正常工作，但组件结果没有更改

App.jsx

import React, { Component } from 'react'
import './App.css';
import fetch from 'isomorphic-fetch'
import Header from './Header'
import Content from './Content'
import Footer from './Footer'

class App extends Component {
    constructor(props) {
      super(props)

      this.state = {
        stripdata: null,
        query: ""
      }
      this.query = this.query.bind(this)
    }
    componentWillMount() {
        fetch(`http://localhost:3000/data/info.json`)
              .then(results => results.json())
              .then(data => {
                this.setState({
                    stripdata: data
                })
              })
              .catch(err => {
                console.log("Didn't connect to API", err)
              })
    }
    query(e) {
        e = e.trim().toLowerCase();
        this.setState({
            query: e
        })
    }
    show(data, query) {
        return (query.length > 0) ? 
                    data.filter(item => { return item.fakename.stripclub.toLowerCase().match( query ) }) :
                    data
    }
    render() {
        console.log(this.show(this.state.stripdata, this.state.query))
        return (
          <div className="App">
            <Header onQuery={this.query}/>
            {   
                (this.state.stripdata === null) ?
                    <div className="loading">Loading data...</div> :
                    <Content onResult={ this.show(this.state.stripdata, this.state.query) }/>
            }
            <Footer />
          </div>
        );
    }
}

export default App;

import React，{Component}来自“React”
导入“/App.css”；
从“同构提取”导入提取
从“./头”导入头
从“./Content”导入内容
从“./Footer”导入页脚
类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
stripdata:null，
查询：“
}
this.query=this.query.bind（this）
}
组件willmount（）{
取回(`http://localhost:3000/data/info.json`)
.then（results=>results.json（））
。然后（数据=>{
这是我的国家({
stripdata：数据
})
})
.catch（错误=>{
log（“未连接到API”，错误）
})
}
查询（e）{
e=e.trim（）.toLowerCase（）；
这是我的国家({
查询：e
})
}
显示（数据、查询）{
返回（query.length>0）？
data.filter（item=>{return item.fakename.stripclub.toLowerCase（）.match（query）}）：
数据
}
render（）{
log（this.show（this.state.stripdata，this.state.query））
返回(
{   
（this.state.stripdata==null）？
正在加载数据…：
}
);
}
}
导出默认应用程序；

Content.jsx

import React, { Component } from 'react'
import Result from './Result'

class Content extends Component {
    constructor(props) {
      super(props);

      this.state = {
        stripdata: this.props.onResult
      };
    }
    componentWillMount() {

    }
    render() {
        return (
          <div className="Content">
            <Result stripdata={ this.state.stripdata }/>
          </div>
        );
    }
}

export default Content;

import React，{Component}来自“React”
从“./Result”导入结果
类内容扩展组件{
建造师（道具）{
超级（道具）；
此.state={
stripdata:this.props.onResult
};
}
组件willmount（）{
}
render（）{
返回(
);
}
}
导出默认内容；

Finder.jsx

    import React, { Component } from 'react'

    class Finder extends Component {
        constructor(props) {
          super(props)
          this.state = {}
          this.handleChange = this.handleChange.bind(this)
        }

        handleChange(e) {
            this.props.find(e.target.value)
        }

        render() {
            return (
              <div className="Finder">
                <form id="search" onSubmit="">
                  <span>i want</span> 
                    <input  type="text"
                          placeholder="type who you want"
                          onChange={ this.handleChange }
                  />
                </form>
              </div>
            );
        }
    }

    export default Finder;

import React，{Component}来自“React”
类查找器扩展组件{
建造师（道具）{
超级（道具）
this.state={}
this.handleChange=this.handleChange.bind（this）
}
手变（e）{
this.props.find（例如target.value）
}
render（）{
返回(
我想要
);
}
}
导出默认查找器；

Header.jsx

    import React, { Component } from 'react'
    import Finder from './Finder'

    class Header extends Component {
      constructor(props) {
        super(props);

        this.state = {

        };
        this.find = this.find.bind(this);
      }
      find(e) {
        this.props.onQuery(e)
      }
      render() {
        return (
          <div className="Header">
            <div className="inner">
                <h2>Find with which girl you want to spend your time !!!</h2>
                <Finder find={ this.find }/>
            </div>
          </div>
        );
      }
    }

    export default Header;

import React，{Component}来自“React”
从“./Finder”导入查找器
类头扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
this.find=this.find.bind（this）；
}
查找（e）{
this.props.onQuery（e）
}
render（）{
返回(
找到你想和哪个女孩共度时光！！！
);
}
}
导出默认标题；

Result.jsx

import React, { Component } from 'react'
import PersonCard from './PersonCard'

class Result extends Component {
    constructor(props) {
      super(props);

      this.state = {
        stripdata: this.props.stripdata
      };
    }
    componentWillMount() {

    }

    render() {
        return (
          <div className="result">
          {
            this.state.stripdata.map((item, i) => {
                return <PersonCard key={i} data={item}/>
            })
          }
          </div>
        );
    }
}

export default Result;

import React, { Component } from 'react'
import Facebook from 'react-icons/lib/fa/facebook'
import VK from 'react-icons/lib/fa/vk'
import Phone from 'react-icons/lib/fa/phone'

import React，{Component}来自“React”
从“/PersonCard”导入PersonCard
类结果扩展组件{
建造师（道具）{
超级（道具）；
此.state={
stripdata:this.props.stripdata
};
}
组件willmount（）{
}
render（）{
返回(
{
this.state.stripdata.map（（项，i）=>{
返回
})
}
);
}
}
导出默认结果；
从“React”导入React，{Component}
从“react icons/lib/fa/Facebook”导入Facebook
从“react icons/lib/fa/VK”导入VK
从“react icons/lib/fa/Phone”导入电话

PersonCard.jsx

class PersonCard extends Component {
    constructor(props) {
      super(props);

      this.state = {
        info: this.props.data
      };
    }
    render() {
        var now = new Date().getFullYear();
        return (
            <div className="PersonCard">
                <div className="layer one">
                    <div className="side left face-image">
                        <img src={(this.state.info.photo) ? this.state.info.photo : ""} alt="Person Pic" />
                    </div>
                    <div className="side right info">
                        <p><b>Fake Name:</b> { this.state.info.fakename.stripclub }</p>
                        <p><b>Real Name:</b> { (this.state.info.name) ? this.state.info.name : null }</p>
                        <p><b>Currently Workplace:</b> { (this.state.info.address.work ) ? this.state.info.address.work : null }</p>
                        <p><b>Age:</b> { (this.state.info.born) ? (now - this.state.info.born.slice(0, 4)) : null }</p>
                        <p><br /><a href={ (this.state.info.fakename.facebook) ? this.state.info.fakename.facebook.id : null } ><icon><Facebook /></icon> { (this.state.info.fakename.facebook) ? this.state.info.fakename.facebook.user : null }</a></p>
                        <p><br /><a href={ (this.state.info.fakename.vk) ? this.state.info.fakename.vk.id : null }><icon><VK /></icon> { (this.state.info.fakename.vk) ? this.state.info.fakename.vk.user : null }</a></p>
                        <p><br /><a href={ (this.state.info.phone) ? "tel:" + this.state.info.phone : null }><icon><Phone /></icon> { (this.state.info.phone) ? this.state.info.phone : null }</a></p>
                    </div>
                </div>
                <div className="layer two">
                    <div className="about">
                        <p>{ this.state.info.physical }</p>
                        <p>{ (this.state.info.work_days) ? 'All Week ' + this.state.info.work_days : null }</p>
                    </div>
                </div>
            </div>
        );
    }
}

export default PersonCard;

class PersonCard扩展组件{
建造师（道具）{
超级（道具）；
此.state={
信息：this.props.data
};
}
render（）{
var now=new Date（）.getFullYear（）；
返回(
假名：{this.state.info.fakename.stripclub}

实名：{（this.state.info.Name）？this.state.info.Name:null}

当前工作场所：{（this.state.info.address.work）？this.state.info.address.work:null}

年龄：{（this.state.info.born）？（现在-this.state.info.born.slice（0,4））：null}







{this.state.info.physical}

{（this.state.info.work_days）“'All Week'+this.state.info.work_days:null}

);
}
}
导出默认个人名片；

---

请帮我解决这个问题。

试着像这样编写内容组件：

class Content extends Component {
    render() {
        return (
          <div className="Content">
            <Result stripdata={  this.props.onResult }/>
          </div>
        );
    }
}

在输入值更改后，可能不会调用构造函数。 每次呈现组件时都会调用构造函数的假设使许多初学者感到困惑

无论如何，您不需要在这些表示组件（）中使用状态

---

只需使用道具。

请提供已实现的结果组件，tnxd是否有任何错误？

class Result extends Component {    
    render() {
        return (
          <div className="result">
          {
             this.props.stripdata.map((item, i) => {
                return <PersonCard key={i} data={item}/>
            })
          }
          </div>
        );
    }
}

 constructor(props) {
      super(props);
      this.state = {
        stripdata: this.props.onResult
      };
    }