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

Question

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

submit.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() 不会在第一次提交后再次调用，因为传递的 props 没有改变，但事实并非如此，因为它在第一次提交时已经不起作用。当我在 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 这是您提供的工作代码。

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

How do I make Component rerender when props passed from parent and state changed?

reactjs

axios

react-props

react-state-management