Состояние не монтируется с помощью компонента WillMount

Question

У меня есть триод, и я пытаюсь отобразить контент после того, как пользователь выбрал узел, но контент не меняется.

 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, но я думаю, что что-то не обнаруживает изменений?

Answer 1

Несколько вещей здесь.

Ваше состояние не меняется, потому что функция, в которой вы вызываете 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(). Вызывается только один раз, когда компонент смонтирован.