React组件未在setState（{}）上重新呈现

Question

I've read through a bunch of other posts, and I can't figure out why my files don't load.

I'm using setState not state = and so on. But anyway, here's the code, if anybody has any ideas, I'd be very happy!

Essentially, the component mounts, then runs getClientFiles() , which pulls an array of references. Then this function executes getFileData() which takes each of those reference IDs, and pulls back the file information, which gets stored in this.state.client_files , and then mapped over in the JSX.

The currentUser.first_name populates just fine. But my understanding is that it's running the getClientFiles() asynchronously, and therefore doesn't have the file_refs on first run. My assumption was, though, by using setState({ file_refs: file_refs}) is that the component should re-render... but it doesn't.

Note: If I refresh the page, the files load. So it is only on initial login that they don't populate.

I'm fairly new to React... so please be kind! If you notice other issues in the code here, it'd be great if you pointed them out.

class Client extends Component {

  constructor(props) {
    super(props)

    this.state = {
      header: "PartnerPortal",
      client_files: [],
      file_refs: [],
      user_id: ""
    };

  }

    componentDidMount() {
        this.getClientFiles();
    };

    getClientFiles() {
      let id = this.props.currentUser.user_id;
      let file_refs = [];

      axios.get(`/users/get-client-files/${id}`)
        .then ( res => {
          console.log(res.data.response);
          let response = res.data.response;

          for (let i = 0; i < response.length; i++) {
            file_refs.push(response[i].file_id);
          };
          this.setState({
            file_refs: file_refs
          })
          this.getFileData();
        })
    }


    getFileData() {

      let fileRefs = this.state.file_refs;
      let fileData = [];

      for (let i = 0; i < fileRefs.length; i++) {
        axios.get("/files/get-file/" + fileRefs[i])
          .then( res => {
            fileData.push(res.data.response);
            this.setState({
              client_files: fileData,
              data_returned: true
            })
          })
          .catch( err => console.log(err.response.data))
      }
    }

  render() {

      return(
      <Fragment>
         <div className="container">
          <div className="row">
            <div className="col-lg-12">
                <h4>
                  <em>Welcome, {this.props.currentUser.first_name} {this.props.currentUser.last_name}</em>
                </h4>
                <h5>
                  <em>{ this.props.currentUser.client_name}</em>
                </h5>

                <div className="fileBox">

                  {this.state.client_files.map(( file, i ) => (
                    <a key={i} style={styles.linkCard} href={file.file_url} target="_blank">
                    <div key={i} className="clientCard">

                      { file.file_type === "PDF" &&
                        <span><i className="fas fa-file-pdf pdf"></i></span>
                      }
                      { file.file_type === "DOC" &&
                        <span><i className="fas fa-file-alt doc"></i></span>
                      }
                      { file.file_type === "Directory" &&
                        <span><i className="fas fa-folder-open dir"></i></span>
                      }
                      { file.file_type === "Presentation" &&
                        <span><i className="fas fa-file-powerpoint ppt"></i></span>
                      }
                      <p>{file.file_name}</p>

                    </div>
                    </a>
                    ))}
                </div>
              </div>
            </div>
          </div>
      </Fragment>
    );
  }
}

Update: I have updated the code to the follow based on suggestions in the answers.

componentDidMount() {
        this.getClientFiles();
    };

    getClientFiles() {
      let id = this.props.currentUser.user_id;
      let file_refs = [];

      axios.get(`/users/get-client-files/${id}`)
        .then ( res => {
          console.log(res.data.response);
          let response = res.data.response;

          for (let i = 0; i < response.length; i++) {
            file_refs.push(response[i].file_id);
            this.setState({
              file_refs
            }, () => {
            this.getFileData();
          })
        }
      });
    }

Unfortunately, still not getting the files until after a page refresh :(

Answer 1

Your problem is likely on these lines:

this.setState({
    file_refs: file_refs
})
this.getFileData();

setState is asynchronous, so you will not have guaranteed access to this.state immediately after invoking that method. You need to move the call to getFileData into the second parameter of setState , that will ensure that it will be invoked after state is actually set (ie you can use this.state ):

getClientFiles() {
    let id = this.props.currentUser.user_id;
    let file_refs = [];

    axios.get(`/users/get-client-files/${id}`)
        .then(res => {
            console.log(res.data.response);
            let response = res.data.response;

            for (let i = 0; i < response.length; i++) {
                file_refs.push(response[i].file_id);
            }
            this.setState({
                file_refs
            }, () => {
                this.getFileData();
            });
        });
}

See more here: https://reactjs.org/docs/react-component.html#setstate

Answer 2

I managed to solve this by doing the following:

Setting state with returned_data: false , and then triggering the getClientFiles() function prior to returning the app. The function then sets state returned_data: true .

render() {

      if (this.state.returned_data === false) {
        this.getClientFiles();
      }

      return( <App /> );
    }