Question

我有一个这样的组件，可以通过props设置初始状态：

    class CarsModal extends PureComponent {
      constructor(props) {
        super(props);
        autoBind(this);

        const { data } = {} } = props;

        this.state = {
          selectedCar: data.category || '',
          cars: [],
          isSpam: data.spam,
          pick: data.pick,
          suitable: data.suitable,
          articles: false,
          show: false,
        };
        this.messageTimer = 0;
      }

      async componentDidMount() {
        const cars = await getCars();
        this.setState({
          cars,
        });
      }

      componentWillUnmount() {
        clearTimeout(this.messageTimer);
      }

      close() {

      }

      select(car) {
        this.setState({
          selectedCar: car,
        });
      }

      async save(scrapeRequest = false) {
        const { carId } = this.props;
        const {
          selectedCar,
          isSpam,
          pick,
          suitable,
          articles,
        } = this.state;

        await curateCar(storyId, {
          selectedCar,
          is_spam: isSpam,
          pick: pick,
          suitable: suitable,
          articles: articles,
          scrape: scrape,
        });

        if (!scrape) {
          this.setState({
            show: true,
          });
          clearTimeout(this.messageTimer);
          this.messageTimer = setTimeout(() => {
            this.setState({
              show: false,
            });
          }, 1500);
        }
      }

      scrape() {
        this.save(true);
      }

      toggle(key) {
        this.setState((state) => ({
          [key]: !state[key],
        }));
      }

      render() {
        const { show, curatorData } = this.props;
        const { author, cars, show } = this.state;

        return (
          <Modal
            show={show}
            onHide={this.handleClose}
            dialogClassName={cx('curate-modal')}
            centered
          >
            <ionClick={this.close} />
            <h3>Tools</h3>
            <div>
              <span>Auto:</span>
              <DropdownButton
                title={(
                  <>
                    {selectedAuthor}
                    <i />
                  </>
                )}

              >
                {cars.map((car) => (
                  <Dropdown.Item
                    key={author}
                    active={author === car}
                    onClick={() => this.select(author)}
                  >
                    {author}
                  </Dropdown.Item>
                ))}
              </DropdownButton>
            </div>
            {OPTIONS.map((option) => (
              <Option
                key={option.key}
                id={option.key}
                checked={this.state[option.key]}
                onChange={() => this.toggle(option.key)}
              >
                {option.content}
              </Option>
            ))}
            <div className={cx('update-info')}>
              <button
                type="button"
                onClick={() => this.save()}
              >
                Update
              </button>
              {showMessage && (
                <span>Updated</span>
              )}
            </div>
            <hr />
            <span
              className={cx('link')}
              onClick={this.scrape}
            >
              Scrape article
            </span>
            <a href='/'>Test 1</a>
            <a href='/'>Vtest 2</a>
          </Modal>
        );
      }
    }

    const mapDispatchToProps = (dispatch) => ({
      actions: bindActionCreators({ ...actions }, dispatch),
    });

    const mapStateToProps = (state) => ({
      userData: state.reducer.userData,
    });

但是我知道从props设置初始状态是反模式。我尝试使用getDerivedStateFromProps(nextProps, prevState) React component initialize state from props

但是在那之后我的状态每次都会更新，而实际上并没有改变，是否每次都会使用相同的道具进行更新。我只需要在INITIAL负载上设置初始状态。我该怎么办？

Answer 1

强烈建议您不要使用getDerivedStateFromProps。这就是为什么reactjs博客上有一篇名为“您可能不需要派生状态”的帖子的原因

我认为对于基于道具设置初始状态到底有什么问题（以及道具的目的是什么）存在一些普遍的困惑。

道具的要点是，它们提供了一种简单而一致的方式来传递数据，并且如果这些道具发生变化，则视图会自动更新。

状态的要点是提供一种一致的方式来在您的应用程序中存储“有状态”信息（又称可更改信息）。

让我们列出一些示例：

(A) state (source of truth) => view //很好。真理的来源是国家。

(B) state (source of truth) => props => view //很好。真相的来源是父组件状态。（或者，状态将是redux存储-也可以）

(C) redux store (source of truth) => props => state => view //这很令人困惑。为什么我们不只是去store => props => view？

(D) state (source of truth) => props => state => view //这很令人困惑。现在，我们将真理的来源分为两个不同的状态。 但是，这不一定在每种情况下都是反模式。

(E) state/store => props => state (after initial seed of data, this is the source of truth) => view

这不是反模式，因此只要您仅将上方的状态用作数据的初始种子即可。在后续渲染中，（E）中的信息流实际上只是state => view。这是简单且具有单一事实来源的单向性。

此post可能有帮助。

Answer 2

如何在componentDidMount中使用道具设置状态？

componentDidMount(){
 this.setState({
  selectedCar: this.props.data.selectedCar
 })
}

从React componenet中的props设置初始状态

2 个答案: