如何在reactjs中访问第二页

Question

当前，我正在使用reactjs中的向导表单。我们有一个4页的表单（步骤1，步骤2，步骤3和步骤4）。 Wizard.js文件包含在每个步骤中。我在switch语句中为他们创建了逻辑。

第一步成功地继续。当我单击“下一步”按钮时，在步骤2中，没有任何反应。

Wizard.js代码

  this.state = {
  current: 1,
};

switch (this.state.current) {
      case 0:
        // code run for step 1
        fetch('..../api/auth/createuser', {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            user: userOject,
          }),
        })
          .then(response => response.json())
          .then(createUserRes => {
            if (createUserRes.error) {
              console.warn(createUserRes);
            } else if (createUserRes && createUserRes.user) {
              info();
              console.warn(createUserRes);
              localStorage.setItem(
                'user',
                JSON.stringify(createUserRes.user),
              );
              const modifier = {
                id: createUserRes.user._id,
                type: createUserRes.user.profile.type,
                profile: {
                  fullName: values.fullName,
                  position: values.lastPosition,
                  username: values.username,
                  location: values.lastPosition,
                  company: values.lastCompany,
                  photo: '',
                  screen: 'Step1',
                },
              };
              fetch(`...../api/auth/user/update`, {
                method: 'POST',
                headers: {
                  Accept: 'application/json',
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                  id: createUserRes.user._id,
                  modifier,
                }),
              })
                .then(response => response.json())
                .then(res => {
                  if (res.error) {
                    console.warn(res);
                  } else {
                    console.warn(res);
                    this.next();
                  }
                })
                .done();
            }
          });
        break;
      case 1:
        // code run for step 2
        this.handleUpload = e => {
          const reader = new FileReader();
          const storeUser = JSON.parse(localStorage.getItem('user'));
          reader.onload = function(upload) {
            fetch(`....../api/s3/uploadtoaws`, {
              headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
              },
              method: 'POST',
              body: JSON.stringify({
                userId: storeUser._id,
                type: 'employee',
                content: upload.target.result,
                key: 'e.file.name',
                oldKey: '',
              }),
            })
              .then(response => response.json())
              .then(res => {
                console.warn(res);
                this.next();
              })
              .done();
          };

          reader.readAsDataURL(e.file.originFileObj);
        };
        break;
      case 2:
        // code run for step 3
        break;
      case 3:
        // code run for step 4
        fetch(`...../api/auth/user/updateskills`, {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            id: user._id,
            type: user.profile.type,
            modifier: {
              'profile.skills': values.skills,
            },
          }),
        })
          .then(response => response.json())
          .then(res => {
            if (res.error) {
              console.warn(res);
            } else {
              console.warn(res);
              // this.afterDone();
              this.next();
            }
          })
          .done();
        break;
      default:
    }

Step2代码

<Form onSubmit={this.handleSubmit}>
    <FormItem>
        {getFieldDecorator('picture', {
        rules: [
        {
        required: true,
        message: 'Please upload picture!',
        },
        ],
        })(
        <Upload onChange={this.handleUpload}>
            <Button>
                <Icon type="upload"/>
                Click to Upload
            </Button>
        </Upload>
        ,
        )}
    </FormItem>