Reactjs 故事书旋钮不更新

我已经为我的react项目设置了故事书，我有两个故事。一个简单的按钮和一个较大的组件。我对这两个都使用旋钮，它可以很好地使用简单的按钮，但它不会更新较大的组件（withInfo加载项实际上显示了旋钮的正确更新信息，但组件不会更新。） 这告诉我我的组件有问题，而不是故事书旋钮。但在我的应用程序中，该组件似乎工作得很好

我的按钮故事

  .add('with text', () => {
    const buttonText = text('Button Text', 'Hello Button');
    return (
      <Button onClick={action('clicked')}>{buttonText}</Button>)
  })

我的插件.js

import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-links/register';
import '@storybook/addon-actions/register';

---

组件仅在获得初始状态时使用道具，在渲染期间甚至不使用道具

有点反模式-

也不完全是我所说的“纯”成分-

除非你真的更新了你的状态（你在处理程序中做的），否则你不会看到基于这些道具的更新

也就是说，如果你想继续沿着这条路走下去，你需要一种方法来应对道具的变化。您可以使用组件WillReceiveProps生命周期并在此处调用setState

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Card, CardContent, CardMedia, Typography, Button, Slider, LinearProgress } from '@material-ui/core';
import SendIcon from '@material-ui/icons/Send';
import CloseIcon from '@material-ui/icons/Close';
import "./index.scss";

class SignType extends PureComponent {

    constructor(props) {        
        super(props);
        this.state = {
            typeId: props.typeId,
            typeName: props.typeName,
            image: props.image,
            availableSigns: props.availableSigns,
            requestedSigns: props.requestedSigns,
            isSaving: props.isSaving,
            onRequsetSigns: props.onRequsetSigns,

            // Local Vars
            requestAmount: 5,
            showOrderMore: false,
        };

        this.onOrderMoreClicked = this.onOrderMoreClicked.bind(this);
        this.onHideOrderMore = this.onHideOrderMore.bind(this);
        this.onRequestAmountChanged = this.onRequestAmountChanged.bind(this);
        this.onSaveRequest = this.onSaveRequest.bind(this);
    }

    componentDidMount() {

    }

    onOrderMoreClicked() {
        this.setState({ showOrderMore: true });
    }
    onHideOrderMore() {
        this.setState({ showOrderMore: false });
    }
    onRequestAmountChanged(event, value) {
        this.setState({ requestAmount: value });
    }
    onSaveRequest() {
        this.setState({ showOrderMore: false });
        this.state.onRequsetSigns(this.state.typeId, this.state.requestAmount);
    }

    render() {
        const { typeId, availableSigns, requestedSigns, image, typeName, showOrderMore, isSaving, requestAmount } = this.state;
        return (
            <Card className="signType">
                <CardMedia
                    className="cover"
                    image={image}
                    title="Live from space album cover"
                />
                <div className="details">
                    <CardContent className="content">
                        <Typography component="h5" variant="h5">
                            {typeName}
                        </Typography>
                        <Typography variant="body1" color="textPrimary">
                            {availableSigns} signs available
                            {!showOrderMore && !isSaving && (
                            <Button color="primary" onClick={this.onOrderMoreClicked}>
                                Order more
                            </Button>)}
                        </Typography>

                        {requestedSigns > 0 && (
                            <Typography variant="subtitle2" color="textSecondary">
                                {requestedSigns} requested signs pending
                        </Typography>
                        )}
                    </CardContent>
                    {showOrderMore && (
                        <div className="requestSignsControl">
                            <Typography id={"request-slider-" + typeId} variant="h6" color="textPrimary">
                                Request additional signs
                                </Typography>
                            <Slider
                                defaultValue={5}
                                aria-labelledby={"request-slider-" + typeId}
                                valueLabelDisplay="auto"
                                step={1}
                                marks
                                min={1}
                                max={25}
                                onChangeCommitted={this.onRequestAmountChanged}
                            />
                            <div>
                                <Button variant="contained" color="secondary" onClick={this.onHideOrderMore} className="icon">
                                    <CloseIcon className="icon" />
                                </Button>
                                <Button variant="contained" color="primary" onClick={this.onSaveRequest} className="icon">
                                    Send Request
                                    <SendIcon className="icon" />
                                </Button>
                            </div>
                        </div>
                    )}
                    {isSaving && <LinearProgress />}
                </div>
            </Card>
        );
    }
}

SignType.propTypes = {
    typeId: PropTypes.string.isRequired,
    typeName: PropTypes.string.isRequired,
    image: PropTypes.string.isRequired,
    availableSigns: PropTypes.number.isRequired,
    requestedSigns: PropTypes.number.isRequired,
    isSaving: PropTypes.bool.isRequired,
    onRequsetSigns: PropTypes.func.isRequired,
};

export default SignType;

import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withInfo } from '@storybook/addon-info';
import { withConsole } from '@storybook/addon-console';

import 'typeface-roboto';

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator(withInfo);
addDecorator(withKnobs);
addDecorator((storyFn, context) => withConsole()(storyFn)(context));

configure(loadStories, module);

import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-links/register';
import '@storybook/addon-actions/register';