背景

我正在开发一个使用 ReactJS 作为渲染库的 Meteor 应用。

目前，我在更新数据时重新渲染子组件时遇到了问题，即使父组件正在访问更新后的数据并且应该将其传递给子组件也是如此。

父组件是一个数据表。子组件是一个点击编辑日期字段。

它(理论上)的工作方式:父组件将现有的日期数据作为 prop 传递给子组件。子组件获取现有的 props 数据，处理它并使用它设置一些状态，然后有 2 个选项:

• 默认:显示数据
• 如果用户单击数据字段:更改为输入并允许用户选择日期(使用 react-datepicker)，更改状态——当用户单击字段外部时，触发返回以仅显示并保存更新的数据状态到数据库

我在表格的每一行中使用了两次子组件，每次使用它时，它都需要访问数据库中的最新日期数据。因此，如果一个字段中的数据发生更改，第二个字段应反射(reflect)该更改。

问题

第二个字段不反射(reflect)数据库中的变化，除非我手动刷新页面并强制子组件使用新数据呈现。已编辑的字段反射(reflect)了数据更改，因为它反射(reflect)了状态中存储的内容。

阅读 React 文档后，我确定问题是因为日期作为 prop 进入，然后作为状态处理——并且因为组件不会从 prop 更改中重新渲染。

我的问题

我该怎么做才能解决这个问题？

我对文档的所有阅读都强烈建议远离 forceUpdate() 和 getDerivedStateFromProps() 之类的东西，但结果我不确定如何让数据按我想要的方式传递

想法？

我的代码

我稍微缩短了代码并删除了特定于我的项目的变量名称，但如果有帮助，我可以提供更多实际的变量名称。我认为我的问题比直接调试更概念化。

parent

ParentComponent () {
    //Date comes as a prop from database subscription
    var date1 = this.props.dates.date1 
    var date2 = this.props.dates.date2
    return(
        <ChildComponent 
            id='handle-date-1'
            selected={[date1, date2]} />
        <ChildComponent 
            id='handle-date-2'
            selected={[date1, date2]} />
    )
}

child

ChildComponent() {
    constructor(props) {
        super(props);
        this.state = {
            date1: this.props.selected[0],
            date2: this.props.selected[1],
            field: false,
        };
    }

    handleDatePick() {
        //Handles the event listeners for clicks in/out of the div, handles calling Meteor to update database.
    }
    renderDate1() {
        return(
            <div>
                {this.state.field == false &&
                    <p onClick={this.handleClick}>{formatDate(this.state.date1)}</p>}
                {this.state.field == true &&
                    <DatePicker
                        selected={this.state.date1}
                        startDate={this.state.date1}
                        onChange={this.handleDatePick}
                    />
                }
            </div>
        )
    }
    renderDate2() {
        return(
            <div>
                {this.state.field == false &&
                    <p onClick={this.handleClick}>{formatDate(this.state.date2)}</p>}
                {this.state.field == true &&
                    <DatePicker
                        selected={this.state.date2}
                        startDate={this.state.date2}
                        onChange={this.handleDatePick}
                    />
                }
            </div>
        )
    }
    render() {
        return(
            //conditionally calls renderDate1 OR renderDate2
        )
    }
}

(如果这段代码/我的解释很粗糙，那是因为我仍然是一个相当初学者/低水平的开发人员。我没有接受过正规培训，所以我在工作中学习，同时开发一个非常困难的应用程序.作为一个单独的开发者。说来话长。请温柔点!)

最佳答案

React 文档有一节介绍 constructor() 的最佳实践用法.阅读这篇文章，密切注意黄色突出显示的“注意”部分，应该能准确说明您遇到的问题。

本质上，constructor() 只运行一次，最常用于初始化内部/本地状态(或绑定(bind)方法)。这意味着当 constructor() 为那个 child 调用。无论 selected 的值在调用 constructor() 时是什么，都将设置为 child 的状态，并且即使值继续变化也将保持不变。

因此，传递给子组件的 selected 属性的任何连续更新都不会反射(reflect)在该组件的内部状态中，这意味着不会重新渲染那个组件。您需要在子组件的其他地方使用 React 的 setState() 方法来正确更新该子组件的状态并触发重新渲染。

使用 React 生命周期方法的组合来正确更新您的子组件是可行的方法。下面的代码片段让您大致了解在 componentDidMount() 和 componentDidUpdate()

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date1: 0,
      date2: 0,
    };
  }

  /*
    Any time the child mounts to the DOM, 
    you can use the method below to set 
    your state using the current value of your 
    selected prop from the parent component...
  */

  componentDidMount() {
    this.setState({
      date1: this.props.selected[0],
      date2: this.props.selected[1]
    });
  }

  /* 
   When the child receives an update from its parent, 
   in this case a new date selection, and should 
   re-render based on that update, use the method below 
   to make a comparison of your selected prop and then 
   call setState again...
  */

  componentDidUpdate(prevProps) {
    if (prevProps.selected !== this.props.selected) {
      this.setState({
        date1: this.props.selected[0],
        date2: this.props.selected[1]
      });
    }
  }

  render() {
    const { date1, date2 } = this.state;
    return (
      <div style={{ border: `4px dotted red`, margin: 8, padding: 4 }}>
        <h1 style={{ fontWeight: 'bold' }}>Child</h1>
        <h2>The value of date1 is {date1}</h2>
        <h2>The value of date2 is {date2}</h2>
      </div>
    );
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      valOne: 0,
      valTwo: 0
    };
  }

  incrementOne = () => {
    this.setState(prevState => ({ valOne: (prevState.valOne += 1) }));
  };

  incrementTwo = () => {
    this.setState(prevState => ({ valTwo: (prevState.valTwo += 1) }));
  };

  render() {
    const { valOne, valTwo } = this.state;
    return (
      <div style={{ border: `4px solid blue`, margin: 8, padding: 4 }}>
        <h1 style={{ fontWeight: 'bold', fontSize: 18 }}>Parent</h1>
        <button onClick={() => this.incrementOne()}>Increment date1</button>
        <button onClick={() => this.incrementTwo()}>Increment date2</button>
        <Child selected={[valOne, valTwo]} />
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.querySelector('#app'));

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

由于您正在为您的 child 使用 React 组件模式，因此充分利用 React 生命周期方法将真正帮助您解决这个问题。我强烈建议你学习 the React component lifecyle .随着您继续使用 React，在这种情况下它将变得必不可少。 componentDidMount()和 componentDidUpdate()是很好的起点。

希望对您有所帮助。让我们知道结果如何。

关于javascript - 修复未重新渲染的子组件的方法(由于作为 Prop 而不是状态传递的数据发生变化)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52749644/