Reactjs如何在状态中初始化数组，以便我可以使用名称过滤搜索栏中的数组

如何解决Reactjs如何在状态中初始化数组，以便我可以使用名称过滤搜索栏中的数组

我是 reactjs 的新手，我正在学习在 reactjs 中更改状态。我正在构建一个求职网站，并且我正在尝试在另一个组件中定义的状态下初始化一个数组对象，但我无法并且稍后将其初始化到搜索栏中并按名称和位置对其进行过滤。 我必须制作两个不同的搜索栏，一个用于 SearchBarForJobs，另一个用于 SearchBarForNames，以便我可以使用任何一个进行过滤。 这是我的 searchBar，我想将它添加到 app.js 的顶部，在我的搜索栏中，我想按名称和位置过滤作业。我对如何过滤感到震惊，当我要进行过滤时，我对如何初始化必须过滤的数组感到困惑：

import React from 'react';

class Search extends  React.Component{
    // state={} I dont know how to initiaze a array in the state from another component
    render(){
        return(
            <div className='ui container'>
            <form >  
                <div className='field'>
                    <label>What</label>
                    <input type='text' />
                </div>
            </form>
         </div>
        );
    }
}
export default Search;

这是我的 App.js：

import React from 'react';
import Jobs from "./jobs.json";
import JobBriefList from "./JobBriefList";

import Search from './search';

class App extends React.Component {
  
    
  render(){
  return (
    <div className="container">
      <Search />,<JobBriefList jobs={Jobs} />
    </div>
  )};
}

export default App;

这是我的 Jobbrief.js：

import React from 'react';
function JobBrief(props) {
      const { name,location,salary,description,logo } = props.job;
      const { city,country } = location;
    
      return (
        <div>
          <h4>{name}</h4>
          <h5>{city},{country}</h5>
          <img src={logo} className="img img-thumbnail" />
          <p>{description}</p>
          <div>Salary: {salary / 1000}K</div>
          <hr />
        </div>
      );
    }
    
    export default JobBrief;

这是我的 jobbriefList.js，这里定义的数组是我想在搜索栏中按名称和位置过滤：

    import JobBrief from "./JobBrief";

function JobBriefList({ jobs }) {
  const [job0,job1,job2,job3,job4] = jobs;
  return (
    <div style={{ maxWidth: "300px",alignItems: "center" }}>
      <JobBrief job={job0} />
      <JobBrief job={job1} />
      <JobBrief job={job2} />
      <JobBrief job={job3} />
      <JobBrief job={job4} />
    </div>
  );
};

export default JobBriefList;

这是我的 index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import Test from './Test';
import App from './App';

ReactDOM.render(
    
    <App />,document.querySelector('#root')
);

这是我的 json 文件，这是我第一次在 React 中使用 json 并且我没有得到这个。一次在 index.js 中。

[
  {
    "name": "Full-stack developer","location": {
      "city": "Delhi","country": "India"
    },"description": "Experience and understanding of MERN stack (Mongo DB,Express.js,React Js,Node.js) or similar frameworks like AngularJS,Vue Js,D3 Js,etc. will be appreciated.","salary": 65000,"logo": "https://picsum.photos/id/180/200/100"
  },{
    "name": "HR","location": {
      "city": "Chandigarh","description": "HRIS Administrator responsibilities include managing our internal databases,keeping employee records in digital formats and educating users on how to use our HR systems. To be successful in this role,you should have experience with database administration and Human Resources Management software,like payroll or applicant tracking systems.","salary": 25000,{
    "name": "Back-end developer","location": {
      "city": "Pune","description": "We are looking for an excellent experienced person in Backend Developer field. Be a part of a vibrant,rapidly growing tech enterprise with a great working environment. As an Backend developer you will be responsible for the server side of our web applications and you will work closely with our engineers to ensure the system consistency and improve your experience.","salary": 40000,{
    "name": "Front-end developer","description": "We are looking for a talented User Experience Designer to create amazing user experiences. The ideal candidate should have an eye for clean and artful design,possess superior UI skills and be able to translate high-level requirements into interaction flows and artifacts,and transform them into beautiful,intuitive,and functional user interfaces. Expert understanding of contemporary user-centered design methodologies for web & mobile is a must.","salary": 19000,{
    "name": "SEO ","location": {
      "city": "Noida","description": "Experienced in Google ad-words,SEO,SMO,SEM (on page & off page) PPC,Digital marketing campaigns,Marketing database,social media and display advertising campaigns.","salary": 15000,"logo": "https://picsum.photos/id/180/200/100"
  }
]