当从父级传递的道具和状态发生变化时，如何使组件重新渲染？

Question

我正在制作一个 Todolist。 Submit 组件处理来自用户的输入并向服务器发出 PUT 请求以更新数据库。 Progress 组件显示进度。当用户提交时，Submit 会向 Progress 发送 props，Progress 会调用 axios.get 来获取数据并更新状态。 props 成功传递，Progress 状态的变量确实发生了变化，但组件没有重新渲染。

提交.js

import Progress from './progress';

export default class Submit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      updateProgress: 'No'
    }
  }

  handleSubmit = (e) => {
    // ...
    this.setState({updateProgress: 'Yes'}));
  }

  render() {
    return (
      <div>
      <div style={{visibility: 'hidden'}}>
        <Progress update={this.state.updateProgress} />
      </div>

      // Form
      </div>
    )
  }
}

progress.js

export default class Progress extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tasksDone: 0
    };
  }  

  getData = () => {
    axios.get('/task')
    .then(res => {
      let resData = res.data[0];
      this.setState({tasksDone: resData.done});
    })
    .catch(err => console.log(err));
  }

  componentDidUpdate(prevProps) {
    if (this.props.update != prevProps.update) {
      console.log('Props changed');
      this.getData();
    }
  }

  componentDidMount() {
    this.getData();
  }

  render() {
    return (<div>You have done: {this.state.tasksDone}</div>)
  }
}

我知道 getData() 在第一次提交后不会再次被调用，因为传递的道具没有改变，但事实并非如此，因为它在第一次提交后就不起作用了。 当我在 componentDidUpdate() 中使用 console.log(this.state.tasksDone) 时，tasksDone 会更新，但不会重新渲染 div，即使我在调用 getData() 后尝试使用 forceUpdate()。 我读过其他问题，他们说变异状态不会触发重新渲染。我的 setState 只是变异了吗？我看到以这种方式改变状态是很常见的。我错过了什么？

重现问题：https://codesandbox.io/s/determined-curie-ipr6v

Answer 1

问题在于您对 Progress 的使用。 您正在更新的进度不是显示屏上显示的进度。

https://codesandbox.io/s/vigilant-ardinghelli-vd9nl 这是您提供的工作代码。