在React中从API过滤数组数据时，如何将startsWith与表单提交一起使用

Question

很抱歉出现noob问题，刚从React开始。因此，我的页面使用以下组件从API访问格式化为Array的县列表：

class FetchRandomCounty extends React.Component {
state = {
loading: true,
county: null,
};
async componentDidMount() {
const url = "http://localhost:5000/api/counties";
const response = await fetch(url);
const data = await response.json();
this.setState({ county: data, loading: false });
}
render() {
return (
<div>
{this.state.loading || !this.state.county ? (
<div> loading... </div>
) : (
<div>
<div>
{" "}
{this.state.county
.filter((item) => item.startsWith("J"))
.map((item) => (
<li key={item}>{item}</li>
))}{" "}
</div>
</div>
)}
</div>
);
}
}

提取的数据是一个数组，看起来像这样：

["Aransas", "Austin", "Bastrop", "Bee", "Brazoria", "Burleson", "Caldwell", "Calhoun", "Chambers", "Colorado", "Comal", "De Witt", "Fayette", "Fort Bend", "Galveston", "Goliad", "Gonzales", "Grimes", "Guadalupe", "Hardin", "Harris", "Jackson", "Jasper", "Jefferson", "Jim Wells"]

目前的输出是：

• Jackson
• Jasper
• 杰斐逊
• 吉姆·威尔斯

如何提示用户输入字母并筛选数组以仅显示以该字母开头的数据？现在我正在使用item.startsWith('J'))，并希望它对用户输入做出响应。这是我的用户输入组件：

class LetterForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: "" };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
alert("A letter was submitted: " + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
StartsWith:
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}

Answer 1

如果您想将FetchRandomCounty和LetterForm作为单独的组件，您可以用一个到FetchRandomCounty的道具来控制选定的字母，并从父级控制它，并为LetterForm引入一个onChange回调道具，用于更改父级中存储的选定字母。

示例

const data = [
"Aransas",
"Austin",
"Bastrop",
"Bee",
"Brazoria",
"Burleson",
"Caldwell",
"Calhoun",
"Chambers",
"Colorado",
"Comal",
"De Witt",
"Fayette",
"Fort Bend",
"Galveston",
"Goliad",
"Gonzales",
"Grimes",
"Guadalupe",
"Hardin",
"Harris",
"Jackson",
"Jasper",
"Jefferson",
"Jim Wells"
];
class FetchRandomCounty extends React.Component {
state = {
loading: true,
county: null
};
componentDidMount() {
// const url = "http://localhost:5000/api/counties";
// const response = await fetch(url);
// const data = await response.json();
this.setState({ county: data, loading: false });
}
render() {
const { loading, county } = this.state;
const selectedLetter = this.props.selectedLetter.toLowerCase();
return (
<div>
{loading || !county ? (
<div> loading... </div>
) : (
<div>
<div>
{county
.filter((item) => item.toLowerCase().startsWith(selectedLetter))
.map((item) => (
<li key={item}>{item}</li>
))}
</div>
</div>
)}
</div>
);
}
}
class LetterForm extends React.Component {
state = { value: "" };
handleChange = (event) => {
this.setState({ value: event.target.value.slice(0, 1) });
};
handleSubmit = (event) => {
event.preventDefault();
this.props.onChange(this.state.value);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
StartsWith:
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}

class App extends React.Component {
state = { selectedLetter: "J" };
updateLetter = (selectedLetter) => {
this.setState({ selectedLetter });
};
render() {
return (
<div>
<FetchRandomCounty selectedLetter={this.state.selectedLetter} />
<LetterForm onChange={this.updateLetter} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>