时间戳

首页 > 解决方案 > 状态未使用 componentWillMount 安装

reactjs - 状态未使用 componentWillMount 安装

问题描述

我有一个树节点，我试图在用户选择一个节点后显示内容，但内容没有改变。

 constructor(props) {
    super(props);

    this.state = {
      t:["",""],
      loading: false,
      disPageTken:"",
    };
  }

  componentWillMount(){

     window.FB.api(
    '/me',
    'GET',
    {"fields":"posts{created_time,likes,comments,picture,full_picture,shares,message},name,picture","access_token":this.state.disPageTken},

    function(response) {
      console.log(response)
      if (response.posts) {
        let listData = [];
        for (let i = 0; i < response.posts.data.length; i++) {
            listData.push({//code})
            }

          this.setState({ listposts: listData });
        } else {
          console.log(response.error);
        }
      }.bind(this)
          );
}

<DirectoryTree showIcon
                defaultSelectedKeys={['0']}
                switcherIcon={<Icon type="down" />} multiple defaultExpandAll onSelect={this.onSelect} onExpand={this.onExpand}>

                <TreeNode icon={<Icon type="facebook" />} title="Facebook" key="0-0" >
                  <TreeNode key="0" icon={({ selected }) => <Icon type={selected ? 'facebook' : 'frown-o'} />} title="Test Page1" key="0" isLeaf/>
                  <TreeNode
                    icon={({ selected }) => <Icon type={selected ? 'facebook' : 'frown-o'} />}
                    title="Test Page2"
                    key="1"
                    isLeaf
                  />
                </TreeNode>
              </DirectoryTree>

我不明白为什么，我尝试使用 componentDidMount 但我认为有些东西没有检测到变化？

标签： reactjsantd

解决方案

这里有几件事。

您的状态没有改变，因为您调用的函数的setState值this与您预期的不同。如果您检查控制台，您应该会看到一个错误，表明这this.setState不是一个函数。您需要更改以下内容：

window.FB.api('/me', 'GET', {"fields":"posts{created_time,likes,comments,picture,full_picture,shares,message},name,picture","access_token":this.state.disPageTken},
function(response) {
  console.log(response)

对此：

window.FB.api('/me', 'GET', {"fields":"posts{created_time,likes,comments,picture,full_picture,shares,message},name,picture","access_token":this.state.disPageTken},
(response) => {
  console.log(response)

箭头函数捕获 的当前值this，因此此代码将按预期工作。

其次，不要用于componentWillMount()副作用（例如获取） - 理想情况下，根本不要使用它。组件挂载时可能会被多次调用，这会导致多次获取。它在较新版本的 React 中不存在（它已重命名UNSAFE_componentWillMount())并将在未来版本的 React 中删除。

相反，使用componentDidMount(). 它只在安装组件时调用一次。

推荐阅读