Question

我是新来的应聘者
我正在尝试在UI中呈现过滤后的对象值数组
我尝试在onClick函数中使用setState以及条件渲染的概念
但是在单击“提交”按钮，邮政编码匹配文本字段后，我无法呈现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 && <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>
  )
}

Answer 1

您在这里犯了几个错误：

您正尝试将zip_value设置为变量，因此必须使用setState进行设置。
未将result道具传递给您Zip组件。
不将生成的道具映射到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>。希望对您有帮助。

Answer 2

查看此onClick={this.sports_zip_search}

从其他上下文中调用时，此回调在被调用时将具有不同的this值，您需要像这样将其与当前上下文绑定，因此从任何地方{{1}调用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

this.setState（{结果：newArray，zip_value：true}）

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

Zip

Answer 3

要更新 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 && <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;

希望它能对您有所帮助。

无法在React UI中呈现过滤后的数组值

3 个答案: