Question

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

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;

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;

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;

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;

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'

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;

请帮我解决这个问题。

Answer 1

尝试编写内容组件，如下所示：

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

结果组件也是如此：

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

在PersonCard中将this.state的每个引用替换为this.props并删除构造函数中的赋值。

我猜测问题在于将道具分配到状态，就像在内容组件中一样：

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

输入值更改后，可能无法调用构造函数。每次渲染组件时都会调用构造函数的假设会让很多初学者反应失误......

无论如何，你不需要在这些表达组件中使用状态（https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0）

只需使用道具。

搜索活动后，React组件不刷新

1 个答案: