Javascript 通过更改输入值过滤数据数组

在下面的代码中，我尝试使用react js运行

onChange={this.handleChange}

。我想通过根据输入中写入的内容对项目进行过滤来获取项目，我尝试了以下操作：

<input value={this.state.name} onChange={this.handleChange}/>

handleChange= evt =>
        this.setState(
            {
                name: evt.target.value.toLowerCase()
            },
            () => {
               .
               .
               .
            }
        )

handleChange=evt=>
这是我的国家(
{
名称：evt.target.value.toLowerCase（）
},
() => {
.
.
.
}
)

首先，有一个输入及其返回输入值的函数

const data=[
  { "info": [{ "name": "ali" }, { "name": "amir" }, { "name": "maya" }] },
  { "info": [{ "name": "eli" }, { "name": "mary" }] },
  { "info": [{ "name": "ali" }] },
  {
    "info": [{ "name": "emila" }, { "name": "alex" }, { "name": "sosan" }]
  }
]

data = data .filter(item => {
  if (this.renderName(item).some((r) => {
        r.includes(name)
    }
   )) return item;
})

renderName(element){
  let elementAdd = []
       for (let i = 1; i <  element.info.length; i++) {
            elementAdd.push(element.info[i].name.toLowerCase())
        }
        return elementAdd
    }

const数据=[
{“info”：[{“name”：“ali”}，{“name”：“amir”}，{“name”：“maya”}]}，
{“info”：[{“name”：“eli”}，{“name”：“mary”}]}，
{“info”：[{“name”：“ali”}]}，
{
“info”：[{“name”：“emila”}，{“name”：“alex”}，{“name”：“sosan”}]
}
]
数据=数据。过滤器（项=>{
如果（此.renderName（项）.some（（r）=>{
r、 包括（姓名）
}
))退货项目；
})
renderName（元素）{
让elementAdd=[]
for（设i=1；i

我想根据输入值过滤数据数组，但它不起作用

编辑：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, info: [{ name: "ali" }, { name: "amir" }, { name: "maya" }] },
        { id: 2, info: [{ name: "eli" }, { name: "mary" }] },
        { id: 3, info: [{ name: "mary" }] },
        {
          id: 4,
          info: [{ name: "emila" }, { name: "alex" }, { name: "sosan" }],
        },
      ],
      name: "",
    };
  }

  reorganiseLibrary = () => {
    const { name } = this.state;
    let library = data;
    if (name !== "") {
      library = library.filter((item) => {
        if (
          this.renderName(item).some((r) => {
            name.includes(r);
          })
        )
          return item;
      });
    }
  };
  renderName(element) {
    let elementAdd = [];
    for (let i = 1; i < element.info.length; i++) {
      elementAdd.push(element.info[i].name.toLowerCase());
    }
    return elementAdd;
  }

  handleChange = (evt) =>
    this.setState(
      {
        name: evt.target.value.toLowerCase(),
      },
      () => {
        this.reorganiseLibrary();
      }
    );

  renderLibrary = () => {
    const { library } = this.state;
    if (!library || (library && library.length === 0)) {
      return "";
    }
    return library.map((item) => <div className="item">{item.id}</div>);
  };

  render() {
    return (
      <div>
        <input value={this.state.name} onChange={this.handleChange} />
        {this.renderLibrary()}
      </div>
    );
  }
}
ReactDOM.render(<App></App>, document.getElementById("app"));

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{id:1，信息：[{name:“ali”}，{name:“amir”}，{name:“maya”}]}，
{id:2，信息：[{name:“eli”}，{name:“mary”}]}，
{id:3，信息：[{name:“mary”}]}，
{
id:4，
信息：[{name:“emila”}，{name:“alex”}，{name:“sosan”}]，
},
],
姓名：“，
};
}
重组图书馆=（）=>{
const{name}=this.state；
让库=数据；
如果（名称！==“”）{
库=库。过滤器（（项）=>{
如果(
此.renderName（项）.some（（r）=>{
名称。包括（r）；
})
)
退货项目；
});
}
};
renderName（元素）{
让elementAdd=[]；
for（设i=1；i
这是我的国家(
{
名称：evt.target.value.toLowerCase（），
},
() => {
这是我的图书馆；
}
);
renderLibrary=（）=>{
const{library}=this.state；
如果（！library | |（library&&library.length==0））{
返回“”；
}
返回library.map（（item）=>{item.id}）；
};
render（）{
返回(
{this.renderLibrary（）}
);
}
}
ReactDOM.render（，document.getElementById（“app”）；

您的代码中有许多问题，我将只讨论关键点

重组图书馆法

• 未从道具中提取的数据

手变法

• 错误使用setState。据我所知，没有第二个参数

renderName方法

• 您只获得name属性，但在renderLibrary方法中需要一个对象

这是一个我能想到的解决办法

state = {
   data: [],
   name: "",
   library: [] // use this to show latest filtered data
}

function onChange(event) {

  const { data} = this.state;

  this.setState(
  {
    name: event.target.value.toLowerCase()
  });

  let filteredResult = [];
  for(var index = 0; index < data.length; index++) {
    var filteredValue = data[index].info.filter(item => item.name.includes(event.target.value));
    if(filteredValue.length != 0)
      filteredResult.push(filteredValue);
  }

  if(filteredResult.length != 0) // remove this if you want to reset the display in your UI
     setState({library : filteredResult}); 
}

renderLibrary = () => {
    const { library } = this.state;
    if (library.length > 0)) {
       return library.foreach(item => (<div className="item">{item.id}</div>)); // modify the onChange filter if you want the outer object        
};

状态={
数据：[]，
姓名：“，
库：[//使用此选项可显示最新筛选的数据
}
函数onChange（事件）{
const{data}=this.state；
这是我的国家(
{
名称：event.target.value.toLowerCase（）
});
让filteredResult=[]；
对于（var index=0；indexitem.name.includes（event.target.value））；
if（filteredValue.length！=0）
filteredResult.push（filteredValue）；
}
if（filteredResult.length！=0）//如果要重置UI中的显示，请删除此选项
setState（{library:filteredResult}）；
}
renderLibrary=（）=>{
const{library}=this.state；
如果（库长度>0））{
return library.foreach（item=>（{item.id}））；//如果需要外部对象，请修改onChange筛选器
};

谢谢@jtabuloc的回答，但是你能告诉我我写的代码有什么问题吗？我假设数据数组变量被覆盖了。如果你能显示你组件的完整代码，我可以指出你的问题的其他贡献者。但是它解决了你的问题吗？我添加了一些新代码来显示我的组件。你的代码it’很好，但是我真的很想找到我代码中的问题。我更新了答案。我希望这会有所帮助。我建议你阅读官方文件。