您在这里犯了几个错误：

1. 您尝试将 zip_value 设置为变量，您必须使用 setState 来执行此操作。
2. 未将 result 属性传递给您的 Zip 组件。
3. 未将结果属性映射到 Zip 组件上。

并且，作为建议，在 React 组件中定义函数时，请尝试使用 camelCase 而不是 _ （这也适用于状态或属性名称约定）。另外，使用 ES6 中的 let 和 const 代替 var 。

您的代码可能如下所示：

index.js :

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import Zip from './Zip';
import { students } from './constants';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      result: [],
      zip1: "enter",
      zipValue: "false"
    }

    this.sports_zip_serach = this.sportsZipSearch.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (event) => {
    console.log("Zip Number:", event.target.value);

    this.setState({ zip1: event.target.value })
  }

  sportsZipSearch = () => {
    const { zip1 } = this.state;

    const newArray = students.filter((el) => { return el.zip === zip1 });

    console.log(zip1)
    console.log(newArray);

    this.setState({ result: newArray, zipValue: true })
  }

  render() {
    const { name, result, zip1, zipValue } = this.state;

    return (
      <div>
        <Hello name={name} />

        <h1>XYZ SPORTS COLLEGE</h1>

        <h2>PLAYER DEMOGRAPHIC DETAILS</h2>

        Players Belonging to same zip code:
         <input type="text" name="zip_code" defaultValue={zip1} onChange={this.handleChange}>
        </input>

        <button onClick={this.sportsZipSearch.bind(this)}>Submit</button><br />

        {zipValue && <Zip result={result} />}

        Number of male over certain age: <input type="number" name="age_number" value="18"></input>

        <input type="submit" value="submit"></input> <br />

        Students not from the same state: <input type="" name="state" value=""></input>

        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Zip.js :

import React from 'react';

const Zip = (props) => {
  return(
    props.result.map(
      results => 
      <h1 key={results.player_first_name}>{results.player_first_name}</h1> /* This is not a perfect key, but given the values at hand */
      )
  )
}

export default Zip;

constants.js :

export const students = [{
            "sports_id": "F1201",
            "player_first_name": "James",
            "Last_name": "Butt",
            "sports_address": "6649 N Blue Gum St",
            "sports_city": "New Orelans",
            "sports_county": "Orelans",
            "sports_state": "LA",
            "zip": "70111",
          },
          {
            "sports_id": "F1202",
            "player_first_name": "Josephine",
            "player_last_name": "darakjy",
            "sports_address": "6649 N Green Gum St",
            "sports_city": "New Orelans",
            "sports_county": "Orelans",
            "sports_state": "LA",
            "zip": "70116",
          },
          {
            "sports_id": "F1203",
            "player_first_name": "Joseph",
            "player_last_name": "david",
            "sports_address": "6649 N Blue Gum St",
            "sports_city": "New Orelans",
            "sports_county": "Orelans",
            "sports_state": "LA",
            "zip": "70116",
          },
          {
            "sports_id": "F1204",
            "player_first_name": "John",
            "player_last_name": "Micheal",
            "sports_address": "6649 N Blue Gum St",
            "sports_city": "New Orelans",
            "sports_county": "Orelans",
            "sports_state": "LA",
            "zip": "70116",
}];

PS：您没有任何 state 调用“first_name”。另外，我不知道您要用最后一个 <input> 做什么。希望这对您有所帮助。

要更新 zip_value ，您必须使用 setstate ，就像用于 result 一样。>

sports_zip_search = () =>> {

var newArray = this.state.student.filter((el) => {

return el.sports_zip.includes(this.state.zip1)});

this.setState ({result: newArray, zip_value: "true"});

console.log("result", this.state.result);

//return (<h1>newArray</h1>)

您必须将 Zip 组件中的新结果数组作为 props 传递。

Index.js 文件

{this.state.zip_value && <Zip result = {this.state.result}/>

并且需要迭代数组来显示每个值

Zip.js文件

import React from 'react';

const Zip = (props) => {

// console.log())

return(

props.result.map(resultData => <h1 key={}>{resultData.player_first_name}</h1>)

`// <h1>{  }</h1>`

)

export default Zip;

希望对你有帮助。

请参阅此 onClick={this.sports_zip_search

此回调在从其他上下文调用时将具有不同的 this 值，您需要像这样将其与当前上下文绑定，因此当从任何地方调用 sports_zip_search 时 this 将指向您的组件

onClick={this.sports_zip_search.bind(this)

同样在代码块中

this.setState ({result: newArray})
//console.log("result", this.state.result);
this.state.zip_value = true; 

也通过 setState 设置 zip_value

this.setState ({result: newArray, zip_value:true})

您还需要像这样将 result 传递给 Zip 组件

{this.state.zip_value && <Zip result={this.state.result} />}