如何使用 React 将数据从另一个页面发送到<option>另一个页面和搜索数据库

Question

我正试图将一个区域的名称(在中选择(发送到另一个页面，以便它在数据库中搜索匹配项并显示其一些详细信息。(由JSON填充，因此每个选项都有一个条目(

主页.js

class Search extends React.Component {
constructor(props) {
super(props);
this.state = {
searchString: "",
house_data: [],
selectedArea: "",
};
this.handleSelect = this.handleSelect.bind(this);
}

handleSelect(eve) {
this.setState({selectedArea: eve.target.value});
console.log(eve.target.value);
}
render() {
let _data = this.state.house_data;
return (
<div>
<select onChange={this.handleSelect} >
<option selected disabled>Select an Area</option>

{_data.map((house) => {
return (
<option>
{house.area}
</option>
);
})}
</select>
<button>
<Link
key={this.state.selectedArea}
to={`/search/${this.state.selectedArea}`}
>Search
</Link>
</button>
</div>
);
}
} 

当我记录props.match.params时，它得到了对象，但当我把它放在一个变量中并使用它进行搜索时，它再也找不到任何东西，当我知道有一个属性具有该区域时，它只返回"undefined"。

SearchPage.js

export function SearchPage(props) {
let { theArea } = props.match.params;
const aHouseThatMatches = data.find((house) => house.area === theArea);
console.log(aHouseThatMatches); //LOGS 'UNDEFINED'
console.log(props.match.params); //LOGS Object { area: "Bournemouth" } which is correct, but it cannot find it in 'aHouseThatMatches'

useEffect(() => {
if (aHouseThatMatches) {
document.title = `${aHouseThatMatches.text}`;
} else {
document.title = "No houses in this area";
}
}, []);
if (aHouseThatMatches) {
return (
<div>
<h1>{aHouseThatMatches.text}</h1>
<h1>{theArea}</h1>
</div>
);
} else {
return (
<div>
<h1>There are no properties in this area</h1>
</div>
);
}
}

Answer 1

正确地取消props.match.params的结构。从你的日志中可以看出，它应该是

let { area } = props.match.params