状态未在我的REACT组件类中更新

如何解决状态未在我的REACT组件类中更新

因此，我有一系列组件：滑块，3个用于长，中，短的按钮和一个Go！按钮。 这是一个屏幕截图，只是为了让您可以可视化UI

我有一个滑块和3个Long短和中按钮的组件类。所有这些都共享状态值。 状态值是滑块上的当前数字。以及基于是否选择了长/短/中按钮的一组正确/错误值。

例如，在屏幕截图中，我们可以看到选择了多头，而没有选择中和短... 所以在状态下看起来像

Long = true
Medium = false
short = false

因此，限制滑块和3个按钮的状态值将传递给Go！按钮作为道具

我只想使用“执行”按钮就可以在每次单击时打印出状态。

但是问题是，当我更换滑块或单击其他按钮时，状态根本不会更新，而我无法弄清楚为什么...

以下是第一堂课的注释的源代码（滑块和3个按钮）

class User_Preference_Params extends Component {
  // contructor containing the current val of slider and the button stats (which are true false values)
  constructor() {
    super();
    this.state = {
      currentValue: 30,button_State: { long: false,medium: true,short: false }
    };
  }
  // these are onclick functions that reset the state any time the long medium short buttons are clicked
  longClicked() {
    this.setState({
      button_State: {
        long: true,medium: false,short: false
      }
    });
  }

  mediumClicked() {
    this.setState({
      button_State: {
        long: false,short: false
      }
    });
  }

  shortClicked() {
    this.setState({
      button_State: {
        long: false,short: true
      }
    });
  }

  // this func gets the current value of the slider on change
  setCurrentValue(new_Value) {
    this.setState({
      currentValue: new_Value
    });
  }

  render() {
    function valuetext(value) {
      // getValue(value);
      return `${value}objects`;
    }

    function getValue(value) {
      return value;
    }

    return (
      // returning my slider and buttons
      <div className="main">
        <div className="slider">
          <Typography id="discrete-slider" gutterBottom>
            Limit
          </Typography>
          <Slider
            defaultValue={30}
            getAriaValueText={valuetext}
            aria-labelledby="discrete-slider"
            valueLabelDisplay="auto"
            step={1}
            marks
            min={1}
            max={50}
            onChange={() => this.getCurrentValue(getValue)}
          />
        </div>

        <div className="Pref_Timeform">
          <FormControl component="fieldset">
            <RadioGroup
              row
              aria-label="position"
              name="position"
              defaultValue="top"
            >
              <FormControlLabel
                value="top"
                control={<Radio color="primary" />}
                label="Long"
                labelPlacement="top"
                onClick={() => this.longClicked()}
              />
              <FormControlLabel
                value="start"
                control={<Radio color="primary" />}
                label="Medium"
                labelPlacement="top"
                onClick={() => this.mediumClicked()}
              />
              <FormControlLabel
                value="bottom"
                control={<Radio color="primary" />}
                label="Short"
                labelPlacement="top"
                onClick={() => this.shortClicked()}
              />
            </RadioGroup>
          </FormControl>
        </div>
        {/* // here i pass the states as props to the button */}
        <div className="Button">
          <User_Preference_Button
            currentValue={this.state.currentValue}
            button_State={this.state.button_State}
          />
        </div>
      </div>
    );
  }
}

这是按钮类的代码

class User_Preference_Button extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.currentValue,button_State: this.props.button_State
    };

  render() {
    return (
      <div className="send_Container">
        <Button
          className="go_Button"
          variant="outlined"
          // here is the onlcikc that is suppost to log the states whcn i click the  Go! button
          onClick={() => {
            console.log(this.state.value,this.state.button_State);
          }}
        >
          Go!
        </Button>
      </div>
    );
  }
}

我感觉可能与ive实例化更新状态的功能有关。但是我很困惑，不胜感激新手！

解决方法

设置滑块的新值时，您没有做任何事情来更新按钮的状态标志。当您可以修正在新值的设置位置（在getCurrentValue中）时，我根本不会将按钮状态作为它们自己的标志进行跟踪。取而代之的是，我从滑块的当前值推断出状态，并在用户单击按钮时设置滑块的值（从而设置按钮状态）。

这是一个简化的示例：

class Radio extends React.Component {
    render() {
        const { name,label,buttonValue,value,setValue } = this.props;
        return (
            <label>
                <input
                    type="radio"
                    name={name}
                    checked={buttonValue === value}
                    onClick={() => setValue(buttonValue)}
                />
                {label}
            </label>
        );
    }
}

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 60
        };
        this.setValue = this.setValue.bind(this);
    }

    setValue(value) {
        this.setState({value});
    }
    
    render() {
        const { value } = this.state;
        return (
            <div>
                <input
                    type="range"
                    min="30" 
                    max="90"
                    step="30"
                    value={value}
                    onChange={({target: {value}}) => this.setValue(+value)}
                />
                <Radio name="range" label="Short" buttonValue={30} value={value} setValue={this.setValue} />
                <Radio name="range" label="Medium" buttonValue={60} value={value} setValue={this.setValue} />
                <Radio name="range" label="Long" buttonValue={90} value={value} setValue={this.setValue} />
            </div>
        );
    }
}

ReactDOM.render(<Example/>,document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>