我需要你寻找错误我的代码。我知道这是错误的。
import React, { Component } from "react";
import { options1, options2, questions } from "./data";
import Select from "react-select";
class Esensial extends Component {
constructor(props) {
super(props);
this.state = {
selectedOption: [],
selectedOption2: []
};
}
handleChange1 = selectedOption => {
this.setState({ selectedOption, selectedOption2: null });
};
handleChange2 = selectedOption => {
this.setState({ selectedOption2: selectedOption });
};
filteredOptions() {
return options2.filter(o => o.link ===
this.state.selectedOption.value);
}
questionsOptions() {
return questions.filter(
question => question.link === this.state.selectedOption2.value
);
}
render() {
const filteredOptions = this.filteredOptions();
const questionsOptions = this.questionsOptions();
return (
<div>
<h1>UKM Esensial</h1>
<div className="form-group">
<label>Pilih Jenis Upaya Pelayanan Kesehatan</label>
<Select
className="form-control"
isClearable={false}
onChange={this.handleChange1}
options={options1}
value={this.state.selectedOption}
/>
</div>
<div className="form-group">
<label>Pilih Variable</label>
<Select
className="form-control"
isClearable
onChange={this.handleChange2}
options={filteredOptions}
value={this.state.selectedOption2}
/>
</div>
<div>
<table className="table table-striped">
<thead>
<tr>
<th>Sub-Variabel</th>
<th>Sasaran</th>
<th>Capaian</th>
</tr>
</thead>
<tbody>
{questionsOptions.map(q => (
<tr>
<td>{q}</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}
}
export default Esensial;
代码将运行，当 selectedOption 获得一个值时，它会过滤（）options2，当 selectedOption2 获得一个值时，它会过滤（）questionsOptions，但我不知道代码仍然崩溃..请帮帮我..是吗地图有问题？可能是因为我不使用 componentDidUpdate(){}。不知何故，当我使用 componentDidUpdate() 时，它会自行执行。也许我使用 firebaseauth() 来验证登录系统。
这是因为this.state.selectedOption2.value，因为您selectedOption2在handleChange1null中设置值。以下可以是解决方案：
questionsOptions() {
const {selectedOption2} = this.state;
return questions.filter(
question => question.link === selectedOption2 && selectedOption2.value || ''
);
}
从您的初始状态开始，我假设它selectedOption2是数组，因此您无法访问值，因为selectedOption2.value您必须通过索引访问，例如selectedOption2[0].value（假设所需索引为 0）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句