Блог

• Я новичок в приложении react
• Я пытаюсь отобразить отфильтрованный массив значений объектов в пользовательском интерфейсе
• Я попробовал использовать setState в функции onClick и вместе с концепцией условного отображения
• Но я не могу отобразить значения newArray после нажатия кнопки отправки текстового поля соответствия почтовому индексу
• можете ли вы помочь ребятам предоставить любые возможные предложения по этой проблеме
• Весь мой код доступен по ссылке ниже — с приведенным ниже фрагментом кода:https://stackblitz.com/edit/react-geum6v?file=index.js

index.js

 Players Belonging to same zip code: <input type="text" name="zip_code" defaultValue = {this.state.zip1} onChange={this.handleChange}></input>
        <button onClick = {this.sports_zip_search}>Submit</button><br />
        {this.state.zip_value amp;amp; <Zip />}

sports_zip_search = () => {
    var newArray = this.state.student.filter((el) => {
    return el.zip == this.state.zip1 });
    console.log(newArray);
    this.setState ({result: newArray})
    //console.log("result", this.state.result);
    this.state.zip_value = true; 
    //return (<h1>newArray</h1>)
  }
  

Zip.js

 const Zip = (props) => {
  return(
    <h1>{ props.result }</h1>
  )
}
  

Здесь вы допускаете пару ошибок:

1. Вы пытаетесь установить, zip_value поскольку это была переменная, вы должны сделать это с помощью setState .
2. Не передается result prop вашему Zip компоненту.
3. Не отображается результирующий реквизит в Zip компоненте.

И в качестве рекомендации при определении функции в компоненте react попробуйте использовать camelCase вместо _ (Это также относится к соглашению об именах состояний или реквизитов). Кроме того, используйте let и const из ES6 вместо 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 amp;amp; <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 так, как вы использовали для результата

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 в качестве реквизита.

Index.js файл

{this.state.zip_value amp;amp; <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; 
  

Также установите zip_value через setState

this.setState ({результат: newArray, zip_value: true})

Вам также необходимо передать result в Zip компонент, подобный этому

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