为什么此setState调用不触发呈现？

Question

我试着读过类似的问题，但没有成功。

export default class Tree extends Component<ITreeProps, ITreeState> {

    public constructor(props: ITreeProps, state: ITreeState) {
        super(props, state);

        Tree.GetJsonStructure(props.Path).then(response => {
            this.setState({
                data : JSON.parse(response)               
            });
            console.log(response);
          });          
    }

    public static GetJsonStructure(jsonPath: string): Promise<string>{
        return new Promise((resolve, reject) => {
          axios.get(jsonPath, { responseType: 'arraybuffer' }).then(response => {
            if (response.status !== 200) {
              // handle error
              reject("FAIL!");
            }
            var buf = new Buffer(response.data);
            //var buf = Buffer.concat(response.data);
            var paki = pako.inflate(buf);
            var decoder = new encoding.TextDecoder();
            var stringo = decoder.decode(paki);
            resolve(stringo);
          });
        });
      }

    public render(): React.ReactElement<ITreeProps> {
        console.log("RENDERINGGGG");
        console.log(this.state)

        if(!this.state || !this.state.data || this.state.data.length == 0 ){
            return <div></div>;
        }

        const data = this.state.data;

        if (!data || data.length == 0) 
            console.log("No properties set for the application");

        return (
          <div className={styles.ToolboxLinkPanel}>
              {
                  data.map(node => (
                      <TreeNode key={node.key} label={node.label} children={node.nodes} isOpen={true} ></TreeNode>
                  ))
              }
          </div>
        );
      }
}

Answer 1

您需要在componentdidmount而不是构造函数中调用api方法：

componentDidMount() {
  Tree.GetJsonStructure(props.Path).then(response => {
    this.setState({
      data: JSON.parse(response)
    });
    console.log(response);
  });
}

至于为什么它是进行api调用的地方，官方文档详细说明了（重点是添加的）：

componentDidMount（）在组件装入（插入到树中）后立即调用。需要DOM节点的初始化应该在这里进行。如果需要从远程endpoint加载数据，这是实例化网络请求[...]的好地方它将触发一个额外的渲染，但它将发生在浏览器更新屏幕之前…