Question

您好，我正在尝试制作步骤向导组件，但存在以下问题。我有以下文件：

import React from 'react';
import { View } from 'react-native';
import WizardStep from './WizardStep'

export default class Wizard extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      questions: this.props.questions,
      answers: this.props.answers,
      totalSteps: this.props.questions.length,
      currentStep: 0,
      results: []
    }
  }

  updateStep = answer =>  {
    newResults = this.state.results
    newResults[this.state.currentStep - 1] = answer
    this.setState({
      results: newResults,
      currentStep: this.state.currentStep + 1
    }, () => {
      if (this.state.currentStep == this.state.totalSteps) {
        this.props.finish();
      }
    })
  }

  renderStep = () => {
    if (this.state.currentStep < this.state.totalSteps) {
        return (
          <View>
            <WizardStep
              question={this.state.questions[this.state.currentStep]}
              answers={this.state.answers[this.state.currentStep]}
              step={this.state.currentStep}
              totalSteps={this.state.totalSteps}
              updateStep={this.updateStep}
            />
          </View>
        );
    } else {
        return null;
    }
  }

  render(){
      return(
          <View>
            {this.renderStep()}
          </View>
      )
  }
}

questions是一个字符串数组，而answers是一个字符串数组。

无论如何，第一个屏幕显示就很好。但是，当我调用updateStep函数时，currentStep更新了，但没有显示问题/答案数组中的第二项。有任何想法吗？预先谢谢你！

为向导添加其他组件：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Button } from "react-native-elements";
import { Constants } from 'expo';
import WizardStepButton from './WizardStepButton';

export default class WizardStep extends React.Component {

  constructor(props){
    super(props);
    this.state ={ 
      question: this.props.question,
      answers: this.props.answers,
      totalSteps: this.props.totalSteps,
      step: this.props.step,
    }
  }
  renderAnswers = () => {
    var answers = []
    for (var i = 0; i < this.state.answers.length; i++) {
        answers.push(
          <WizardStepButton 
            answer={this.state.answers[i]}
            updateStep={this.props.updateStep}
            key={i}
          />
        );
    }
    return answers;
  }

  render(){
      return(
          <View>
            <Text style={styles.title}>Step {this.state.step + 1}/{this.state.totalSteps}</Text>
            <Text style={styles.title}>{this.state.question}</Text>
            {this.renderAnswers()}
          </View>
      )
  }
}

const styles = StyleSheet.create({
  title: {
    marginTop: 30,
    marginBottom: 30,
    fontSize: 25,
    color: 'rgba(96,100,109, 1)',
    lineHeight: 24,
    textAlign: 'center',
  },
});

和按钮组件：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Button } from "react-native-elements";
import { Constants } from 'expo';

export default class WizardStepButton extends React.Component {

  constructor(props){
    super(props);
    this.state ={ 
    }
  }

  render(){
      return(
          <View>
            <Button 
              style={{margin: 10}}
              large
              raised
              title={this.props.answer}
              onPress={() => this.props.updateStep(this.props.answer)}
            />
          </View>
      )
  }
}

Answer 1

仅应使用状态更新器功能来增加状态值。 -https://stackoverflow.com/a/45196079/874027

在编辑并使其恢复状态之前，您无需传播this.state.results。

此外，currentStep检查索引看起来也很容易。

updateStep = answer =>  {
  this.setState((state) => {
    const { results, currentStep } = state
    const newResults = [...results]
    newResults[currentStep] = answer
    return {
      results: newResults,
      currentStep: currentStep + 1,
    }
  }, () => {
    const { currentStep, totalSteps } = this.state
    if (currentStep + 1 === totalSteps) {
      this.props.finish();
    }
  })
}

编辑：在WizardStep组件中，您正在将道具与构造函数中的状态同步，因此，当您在更新状态后尝试传递新道具时，由于向导的构造函数已经触发，它们将永远不会反映在向导中。您可以通过在WizardStep组件中使用道具或向其传递密钥来解决此问题，以便每次密钥更改时都会创建新实例，例如

<WizardStep
  question={this.state.questions[this.state.currentStep]}
  answers={this.state.answers[this.state.currentStep]}
  step={this.state.currentStep}
  totalSteps={this.state.totalSteps}
  updateStep={this.updateStep}
  key={this.state.currentStep}
/>

我已经在本地进行了测试，并且使用这种方法的步骤确实有所改变。

React Native不会在setState渲染下一个数组项

1 个答案: