如何在 React 中停止动态搜索结果的渲染?

Question

我正在努力创建一个动态搜索结果工作流程。我可以毫无问题地呈现结果，但是当我从搜索栏中删除所有输入时，无法弄清楚如何最好地关闭它们。如果您开始键入，地址将显示为匹配，但是当您删除所有地址时，它们不会全部消失。

我的想法是在我的状态变量中使用两个参数之一：showMatches或matches.length。我正在努力看到这个拼图的最后一块。以下是我当前的代码：

应用.js

import React, { Component } from 'react';
import { Form, Button, ListGroup } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import Match from './Match';
//import Render from './Render';
const my_data = require('./data/test.json')
class App extends Component {
state = {
links: [],
selectedLink:null,
userLocation: {},
searchInput: "",
showMatches: false,
matches: [],
searchLink:[]
}
componentDidMount() {
fetch('https://data.cityofnewyork.us/resource/s4kf-3yrf.json')
.then(res=> res.json())
.then(res=> 
//console.log(json)
this.setState({links:res})
);
}
handleInputChange = (event) => {
console.log(event.target.value)
event.preventDefault()
this.setState({searchInput: event.target.value })
this.updateMatches()  
console.log(this.state.showMatches)
console.log(this.state.matches.length)
}
handleSubmit = (event) => {
event.preventDefault()
this.displayMatches();
}
findMatches = (wordToMatch, my_obj) => {
return my_obj.filter(place => {
// here we need to figure out the matches
const regex = new RegExp(wordToMatch, 'gi');
//console.log(place.street_address.match(regex))
return place.street_address.match(regex)
});
}
updateMatches =() => {
const matchArray = this.findMatches(this.state.searchInput, this.state.links);
const newStateMatches = matchArray.map(place => {
//console.log(place.street_address);
return place 
});
this.setState({matches:newStateMatches})
this.state.matches.length > 1 ? this.setState({showMatches: true}) : this.setState({showMatches: false})  
}
alertClicked = address => {
//event.preventDefault(); // not sure what event you're preventing
this.setState({searchLink: address});
this.pushData();
}

render() {
return (
<div>
<input 
placeholder="Search for a Link Near you..." 
onChange = {this.handleInputChange} 
value = {this.state.searchInput}
/>
<ListGroup defaultActiveKey="#link1">
{
this.state.matches.map(match => {
return <Match 
address={match.street_address} 
alertClicked={this.alertClicked}
value = {this.state.searchLink}
logState={this.logState}/>
})
}
</ListGroup>

</div>
);
}
}
export default App;

匹配.js

import React from 'react';
import { ListGroup } from 'react-bootstrap';
const match = ({ alertClicked, address }) => {
return (
<ListGroup.Item 
className="Matches"
action 
// function expressions could cause this to rerender unnecessarily.
onClick={(address) => alertClicked(address)}> 
<p>{`${address}`}</p>
</ListGroup.Item>
)
}

export default match;

感谢您的帮助。

Answer 1

我认为您可以实现这一点的最简单方法是在您的handleInputChange中，如下所示：

handleInputChange = (event) => {
event.preventDefault()
if (event.target.value.length === 0) {
this.setState({searchInput: "", showMatches: false, matches: [] })
return
}
this.setState({searchInput: event.target.value })
this.updateMatches()  
}

但是，"但是当您删除所有方式时，它们不会全部消失"是什么意思？听起来你updateMatches实际上可能存在错误.

编辑：克里斯的评论是关于updateMatches

的。