Question

我将状态设置为一个空数组，然后调用一个函数以更新组件的状态。当我记录函数的状态时，我同时获取了空数组和更新后的数组。

发生这种情况的原因以及如何仅记录更新状态。

以下是我的代码：

class App extends Component { 
  constructor(props) {
    super(props);
    this.state = { 
      videos: [],
    };
    YTSearch({ key: API_Keys, term: 'USA Top40' }, (videos) => {
      this.setState({ videos });
    });
  } 
  render() {
    return (
      <div>
        <SearchBar />
          {console.log(this.state)}
      </div>
    )
  }
}

这是console.log

Answer 1

您不应在 render 方法中返回 console.log ！

最好您的代码应该是：

  class App扩展了组件{
  构造函数（道具）{
    超级（道具）;
    this.state = {视频：[]};
  }
  componentDidMount（）{
    YTSearch（{key：API_Keys，term：'USA Top40'}，（videos）=> {
      this.setState（{videos}）;
    }）;
  }
  componentDidUpdate（prevProps，prevState）{
    const {videos} = this.state;
    if（prevState.videos！==视频）{
      console.log（videos）;
    }
  }
  render（）{
    返回（
      
        
      
    ）
  }
}

此外，您可以将 console.log 放置在return之外：

  render（）{
  console.log（this.state）;
  返回（
    
      
    
  ）
}

Answer 2

注意：setState（{}）是一个异步过程，更像是一个批处理过程，异步运行，并且不会阻止您的UI。所以你可能看不到更改状态后立即在控制台中更新结果。

我同意@souroush的回答，因为这是推荐的处理方式。但是，实现您要执行的操作的一种方法是创建一个函数并通过控制台将状态记录到其中

     logState = () =>{ 
           console.log("State" , this.state) 
      }

     render() {   
       return (
           <div>
              <SearchBar />
              {this.logState()}
           </div> 
        )}

记录类组件的状态

2 个答案: