无论是否使 setState 同步，都无法 setState答案

【问题标题】：Unable to setState regardless of making setState synchronous无论是否使 setState 同步，都无法 setState
【发布时间】：2020-11-05 02:05:54
【问题描述】：

我正在学习如何使用同步setState，但它不适用于我的项目。我想在从 Axios 获得 listingInfo 后更新状态，但它不起作用，但是 res.data 工作正常

class ListingItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listingInfo: {},
      open: false,
    };
    this.getListingData(this.props.itemId);
  }

  setStateSynchronous(stateUpdate) {
    return new Promise((resolve) => {
      this.setState(stateUpdate, () => resolve());
    });
  }

  getListingData = async (item_id) => {
    try {
      const res = await axios.get(`http://localhost:5000/api/items/${item_id}`);
      console.log(res.data);//it's working
      await this.setStateSynchronous({ listingInfo: res.data });
      // this.setState({
      //   listingInfo: res.data,
      // });
      
      console.log(this.state.listingInfo);//no result
    } catch (err) {
      setAlert('Fail to obtain listings', 'error');
    }
  };

非常感谢您的帮助！

【问题讨论】：

我们无法控制 React 的 setState 行为。顺便说一句，您想通过同步设置状态来实现什么？您可以使用conditional-rendering 方法隐藏 UI 组件，直到获取 API 数据。
@PrathapReddy 我只想让 setState 工作，因为目前它根本不工作哈哈哈
您的注释行应该可以工作。但是您不会在setState 之后立即看到数据，因为state 更新是异步的。如果您在返回块中使用该数据，组件将在 UI 中重新呈现数据。它不适合你吗？
是的，它已经在工作了。太感谢了！我按照您的建议使用条件渲染和注释区域

标签： reactjs async-await axios setstate

【解决方案1】：

感谢@PrathapReddy！我使用条件渲染来防止在setState 完成之前渲染数据。我在渲染部分添加了这行代码：

render() {
    if (Object.keys(this.state.listingInfo).length === 0) {
      return (
        <div>
          Loading
        </div>
      );
    } else {
      return //put what you want to initially render here
    }
}

另外，setState也不需要修改，正常的setState就可以了。希望这有用！

【讨论】：