Question

我正在做一个待办事项列表。提交组件可处理来自用户的输入，并向服务器发出PUT请求以更新数据库。进度组件显示进度。用户提交时，Submit将向Progress发送道具，Progress将调用axios.get获取数据并更新状态。道具已成功传递，并且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（），因为传递的道具不会改变，但事实并非如此，因为它在第一次提交时就不起作用。当我在componentDidUpdate（）中使用console.log（this.state.tasksDone）时，taskDone已更新，但div不重新呈现，即使我在调用getData（）之后尝试使用forceUpdate（）。我读过其他问题，他们说变异状态不会触发重新渲染。我的setState只是变异吗？我看到以这种方式更改状态非常普遍。我想念什么？

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

Answer 1

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

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

从父级和状态传递的道具更改时，如何重新渲染组件？

1 个答案: