React Stepper 使用获取的状态列表作为下拉选项到下一步 - 无法读取未定义的属性“地图”

Question

我是 React 的新手，正在创建一个 Stepper（向导）表单，如此数字海洋链接所示： https : //www.digitalocean.com/community/tutorials/how-to-create-multistep-forms-with-react -and-semantic-ui

我改变了那个例子......相反，前两个步骤每个都只有一个下拉选项。 在第一步中，下拉列表是从我的第一个 axios 获取生成的，我希望第二个步骤中的第二个下拉列表显示基于第一个选择的选项。 （为简单起见，这里假设第 1 步选项只是值 1、2 或 3 的列表）

我的问题是我无法将我的过滤列表 (objectsListOptionsForStep2) 转移到下一步，因为我有这个错误： TypeError: Cannot read property 'map' of undefined ...我的变量 (objectsListOptionsForStep2) 在我去的时候似乎是未定义的从第 1 步到第 2 步，因此我无法在下拉列表中将列表显示为选项。

在 MainForm 中，我首先调用 axios 并将数据置于状态。 然后，当我在第一步的第一个下拉列表中选择第一个选项并完成后，我调用我的 handleChange，在其中我获取所选的值，并有条件地调用 axios（如果步骤为 =1），并将值选为选项。

在第二步中，我无法将过滤后的列表用作选项......我有前面描述的这个错误。

有人可以解释或告诉我如何逐步使我的列表处于状态吗？ 非常感谢 ！！！

这是 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;

这里如果 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;

这是 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;

Answer 1

根据你的评论试试这个：

{
(objectsListOptionsForStep2 === null || objectsListOptionsForStep2===undefined) ? 
    <option>Loading</option> : 
    this.objectsListOptionsForStep2.map((u) => (
            <option>{u.id}</option>
          ))
}

告诉我现在发生了什么。 并尝试在codeandbox.io创建一个沙箱

根据你在沙箱中的代码，我在这里编辑： https : //codesandbox.io/s/silly-swirles-kv61w?file=/ src/MainForm.js: 852-878 。 我可以告诉你

• 问题出在 API
• https://swapi.dev/api/planets/{value}/返回 HTML，但它应该返回 JSON，现在我们必须以某种方式解析。
• 您从未将objectsListOptionsForStep2传递给 Form2
• 并且您必须在为该对象获取值后等待触发，然后才能渲染
• 不需要使用这个，现在我可以理解你的代码了

如果您可以更改 API，请告诉我。 如果我能弄清楚 API 部分，我会更新答案。

Answer 2

您无法直接使用this.objectsListOptionsForStep2从子组件（在本例中为FormChoiceTwo ）访问父组件的状态（在本例中为WizardMainForm ）。 你必须通过道具将它传递给一个孩子，所以这样的事情应该可以工作：

1. 在您的mainForm.js文件中，将您需要的数据作为道具值传递给FormChoiceTwo组件。 例如：

<FormChoiceTwo
  nextStep={this.nextStep}
  prevStep={this.prevStep}
  values={values}
  handleUserDetails={this.handleUserDetails} 
  handleChange={this.handleChange}
  objectsListOptionsForStep2={objectsListOptionsForStep2}
/>

2. 在FormChoiceTwo内部通过this.props访问它。 例子：

<select>
  {this.props.objectsListOptionsForStep2.map((u) => (
    <option>{u.id}</option>
  ))}
</select>

您还可以在FormChoiceTwo使用解构，例如const { objectsListOptionsForStep2 } = this.props; 然后你可以在 select 中删除 this.props 并只写objectsListOptionsForStep2.map