[英]React Stepper use fetched list in state to next step as dropdown options - Cannot read property 'map' of undefined
I'm new to React and was creating a Stepper (wizard) form as seen in this digital Ocean link : https://www.digitalocean.com/community/tutorials/how-to-create-multistep-forms-with-react-and-semantic-ui我是 React 的新手,正在创建一个 Stepper(向导)表单,如此数字海洋链接所示: https : //www.digitalocean.com/community/tutorials/how-to-create-multistep-forms-with-react -and-semantic-ui
I changed that example ...instead the firsts 2 steps are only one dropdown choice each.我改变了那个例子......相反,前两个步骤每个都只有一个下拉选项。 In the first step the Dropdown is generated from my first axios fetch, and I want the second dropdown in the second step to show options based on the first selection.
在第一步中,下拉列表是从我的第一个 axios 获取生成的,我希望第二个步骤中的第二个下拉列表显示基于第一个选择的选项。 (Here suppose step 1 options is only a list of value 1, 2 or 3 for simplicity)
(为简单起见,这里假设第 1 步选项只是值 1、2 或 3 的列表)
My problem is that I can't transfer my filtered list (objectsListOptionsForStep2) into the next step as I have this error : TypeError: Cannot read property 'map' of undefined
...My variable (objectsListOptionsForStep2) seems to be undefined when I go from step 1 to step 2 so I can't display the list as options in the dropdown.我的问题是我无法将我的过滤列表 (objectsListOptionsForStep2) 转移到下一步,因为我有这个错误:
TypeError: Cannot read property 'map' of undefined
...我的变量 (objectsListOptionsForStep2) 在我去的时候似乎是未定义的从第 1 步到第 2 步,因此我无法在下拉列表中将列表显示为选项。
In the MainForm I'm first calling axios and putting data in state.在 MainForm 中,我首先调用 axios 并将数据置于状态。 Then When I select the first option in the first dropdown list of the first step and when done I call my handleChange in which I grab the value selected and I conditionnaly call axios (if the step is =1) with the value selected as option.
然后,当我在第一步的第一个下拉列表中选择第一个选项并完成后,我调用我的 handleChange,在其中我获取所选的值,并有条件地调用 axios(如果步骤为 =1),并将值选为选项。
When in the second step I can't use my filtered list as options ... I have this error described earlier.在第二步中,我无法将过滤后的列表用作选项......我有前面描述的这个错误。
Could somebody explain or show me how to do bring my list in state from step to step ?有人可以解释或告诉我如何逐步使我的列表处于状态吗? Thanks a lot !!!
非常感谢 !!!
Here is the MainForm.js这是 MainForm.js
export class WizardMainForm extends Component {
state = {
error: null,
step: 1,
choiceOne: "",
choiceTwo: "",
objectsListOptionsForStep2: []
};
componentDidMount() {
this.handleUserDetails();
}
handleUserDetails = () => {
some code here
};
// Proceed to the next step
nextStep = () => {
const { step } = this.state;
this.setState({
step: step + 1,
});
};
// Go back to previous step
prevStep = () => {
const { step } = this.state;
this.setState({
step: step - 1,
});
};
//Handle fields change
handleChange = (input) => (e) => {
this.setState({ [input]: e.target.value });
if (this.state.step == 1){
const valueSelectedAtStepOne = e.target.value
authAxios
.get(`myUrl/?q=${valueSelectedAtStepOne}`)
.then((res) => {
this.setState({
objectsListOptionsForStep2: res.data,
});
console.log(res.data);
})
.catch((err) => {
this.setState({
error: err.response.data.message,
});
});
}
};
render() {
const { step, choiceOne, objectsListOptionsForStep2 } = this.state;
const values = {choiceOne, choiceTwo};
switch (step) {
case 1:
return (
<FormChoiceOne
nextStep={this.nextStep}
values={values}
handleUserDetails={this.handleUserDetails}
handleChange={this.handleChange}
/>
);
case 2:
return (
<FormChoiceTwo
nextStep={this.nextStep}
prevStep={this.prevStep}
values={values}
handleUserDetails={this.handleUserDetails}
handleChange={this.handleChange}
/>
);
}
}
}
export default WizardMainForm;
Here if FormChoiceOne.js这里如果 FormChoiceOne.js
export class FormChoiceOne extends Component {
continue = (e) => {
e.preventDefault();
this.props.nextStep();
};
render() {
return (
<div>
<Form>
<select
onChange={handleChange("choiceOne")}
defaultValue={values.choiceOne}
>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<Button onClick={this.continue}> Next step </Button>
</Form>
</div>
);
}
}
export default FormChoiceOne;
Here is FormChoiceTwo.js This is where I have my problems...这是 FormChoiceTwo.js 这是我遇到问题的地方...
export class FormChoiceTwo extends Component {
continue = (e) => {
e.preventDefault();
this.props.nextStep();
};
back = (e) => {
e.preventDefault();
this.props.prevStep();
};
render() {
some code
return (
<div>
<Form>
<select>
{this.objectsListOptionsForStep2.map((u) => (
<option>{u.id}</option>
))}
</select>
<Button onClick={this.back}> Previous step </Button>
<Button onClick={this.continue}> Next step </Button>
</Form>
</div>
);
}
}
export default FormChoiceTwo;
According to your comment try this :根据你的评论试试这个:
{
(objectsListOptionsForStep2 === null || objectsListOptionsForStep2===undefined) ?
<option>Loading</option> :
this.objectsListOptionsForStep2.map((u) => (
<option>{u.id}</option>
))
}
Tell me what's happening now.告诉我现在发生了什么。 And try to create a sandbox at codesandbox.io
并尝试在codeandbox.io创建一个沙箱
According to your code in sandbox, I'm editing here : https://codesandbox.io/s/silly-swirles-kv61w?file=/src/MainForm.js:852-878 .根据你在沙箱中的代码,我在这里编辑: https : //codesandbox.io/s/silly-swirles-kv61w?file=/ src/MainForm.js: 852-878 。 I can tell you that
我可以告诉你
https://swapi.dev/api/planets/{value}/
returning HTML, but it should return JSON, now we have to parse somehow. https://swapi.dev/api/planets/{value}/
返回 HTML,但它应该返回 JSON,现在我们必须以某种方式解析。objectsListOptionsForStep2
to Form2objectsListOptionsForStep2
传递给 Form2If you can change the API, let me know.如果您可以更改 API,请告诉我。 And if I can figure the API part I will update the answer.
如果我能弄清楚 API 部分,我会更新答案。
You can't access parent component's state (in this case WizardMainForm
) from child component (in this case FormChoiceTwo
) directly with this.objectsListOptionsForStep2
.您无法直接使用
this.objectsListOptionsForStep2
从子组件(在本例中为FormChoiceTwo
)访问父组件的状态(在本例中为WizardMainForm
)。 You have to pass it to a child via props, so something like this should work:你必须通过道具将它传递给一个孩子,所以这样的事情应该可以工作:
mainForm.js
file pass data you need as prop value to the FormChoiceTwo
component.mainForm.js
文件中,将您需要的数据作为道具值传递给FormChoiceTwo
组件。 For example:<FormChoiceTwo
nextStep={this.nextStep}
prevStep={this.prevStep}
values={values}
handleUserDetails={this.handleUserDetails}
handleChange={this.handleChange}
objectsListOptionsForStep2={objectsListOptionsForStep2}
/>
FormChoiceTwo
access it via this.props
.FormChoiceTwo
内部通过this.props
访问它。 Example:<select>
{this.props.objectsListOptionsForStep2.map((u) => (
<option>{u.id}</option>
))}
</select>
You can also use destructuring inside FormChoiceTwo
like const { objectsListOptionsForStep2 } = this.props;
您还可以在
FormChoiceTwo
使用解构,例如const { objectsListOptionsForStep2 } = this.props;
and then you can remove this.props inside select and just write objectsListOptionsForStep2.map
然后你可以在 select 中删除 this.props 并只写
objectsListOptionsForStep2.map
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.