javascript - Rendering part of a React function component after async call gets completed - Stack Overflow

admin管理员组

文章数量:1402986

I'm using material-ui with a React function ponent and using its Autoplete ponent. I customized it and whenever I change the text in input field, I expect the ponent to render new search result.

callAPI("xyz")

I'm calling the API in the action and using the xyz parameter, I'm calling the dispatch method from this function ponent.

Problem here is, when the ponent makes the call, it is supposed to wait for the API response and then render the result, but it gets an unresolved promise, so it fails rendering.

<Paper square>
    {callAPI("xyz").results.map(
        result => console.log(result);
    )}
</Paper>

as results are a unresolved promise, it will fail to map. I need some way to call the map only once data is available, or show some text before data is there and then change once data is fetched.

Any suggestions to correct this code will be very helpful.

EDIT:

function IntegrationDownshift() {
    return (
        <div>
            <Downshift id="downshift-simple">
                {({
                    getInputProps,
                    getItemProps,
                    getMenuProps,
                    highlightedIndex,
                    inputValue,
                    isOpen,
                    selectedItem
                }) => (
                    <div>
                        {renderInput({
                            fullWidth: true,
                            InputProps: getInputProps({
                                placeholder: "Search users with id"
                            })
                        })}

                        <div {...getMenuProps()}>
                            {isOpen ?
                                 <Paper square>
                                {callAPI(inputValue).users.map(
                                    (suggestion, index) =>
                                        renderSuggestion({
                                            suggestion,
                                            index,
                                            itemProps: getItemProps({
                                                item:
                                                    suggestion.userName
                                            }),
                                            highlightedIndex,
                                            selectedItem
                                        })
                                )}
                            </Paper>  
                             : null}
                        </div>
                    </div>
                )}
            </Downshift>
        </div>
    );
}

I'm using material-ui with a React function ponent and using its Autoplete ponent. I customized it and whenever I change the text in input field, I expect the ponent to render new search result.

callAPI("xyz")

I'm calling the API in the action and using the xyz parameter, I'm calling the dispatch method from this function ponent.

Problem here is, when the ponent makes the call, it is supposed to wait for the API response and then render the result, but it gets an unresolved promise, so it fails rendering.

<Paper square>
    {callAPI("xyz").results.map(
        result => console.log(result);
    )}
</Paper>

as results are a unresolved promise, it will fail to map. I need some way to call the map only once data is available, or show some text before data is there and then change once data is fetched.

Any suggestions to correct this code will be very helpful.

EDIT:

function IntegrationDownshift() {
    return (
        <div>
            <Downshift id="downshift-simple">
                {({
                    getInputProps,
                    getItemProps,
                    getMenuProps,
                    highlightedIndex,
                    inputValue,
                    isOpen,
                    selectedItem
                }) => (
                    <div>
                        {renderInput({
                            fullWidth: true,
                            InputProps: getInputProps({
                                placeholder: "Search users with id"
                            })
                        })}

                        <div {...getMenuProps()}>
                            {isOpen ?
                                 <Paper square>
                                {callAPI(inputValue).users.map(
                                    (suggestion, index) =>
                                        renderSuggestion({
                                            suggestion,
                                            index,
                                            itemProps: getItemProps({
                                                item:
                                                    suggestion.userName
                                            }),
                                            highlightedIndex,
                                            selectedItem
                                        })
                                )}
                            </Paper>  
                             : null}
                        </div>
                    </div>
                )}
            </Downshift>
        </div>
    );
}

• javascript
• reactjs
• material-ui
• react-ponent
• react-async

Share Improve this question Follow edited Aug 9, 2021 at 17:12 Quentin 945k132132 gold badges1.3k1.3k silver badges1.4k1.4k bronze badges asked Jun 2, 2019 at 18:08 beta programmersbeta programmers 65333 gold badges1010 silver badges2323 bronze badges 4

• Dispatch an action for triggering loader or some text that the data is loading, once it get resolved dispatch the action for turning of the loader and setting the data. In your jsx you can write a ternary check if loader is true render the loader ponent else render the data – Beginner Commented Jun 2, 2019 at 18:16
• @DILEEPTHOMAS Can you please provide any psuedo code or sample for your example please – beta programmers Commented Jun 2, 2019 at 18:26
• can you provide some more code, i think paper is a customized ponent. So on change you will be calling a props and the dispatch is done in the parent ponent – Beginner Commented Jun 2, 2019 at 18:29
• @DILEEPTHOMAS added additional code for reference, you can see the callAPI method is taking inputValue and returns the Object with users. I want to apply map on that and call another render. But when it loads initially, the <Paper> renders without the data, as the promise is still unresolved, it fails with map. – beta programmers Commented Jun 2, 2019 at 18:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

React 16.8 introduces Hooks:

Hooks are functions that let you “hook into” React state and lifecycle features from function ponents.

so you have useState() which you can declare a state variable with an empty array and call your API in the useEffect() to populate the state when you get the response from the API:

function App() {

  const [data, setData] = useState([]);

  useEffect(() => {
    callAPI("xyz").then(result => {
      setData(result);
    })  
  }, []);

  if(!data.length) return (<span>loading...</span>);

  return (
    <Paper square>
        {data.map(
            result => console.log(result);
        )}
    </Paper>
  );
}

More about hooks: https://reactjs/docs/hooks-intro.html.

Easiest way to handle this is with a ternanry expression And also its best practice to call your API request in a lifecycle method and then save the result in local state.

ponentDidMount() {
    callAPI("xyz").results.map(
        result => this.setState(result);

}

<Paper square>
    {this.state.results ?
      this.state.results.map(
        result => console.log(result);
      : <p> Loading... </p>
    )}
</Paper>

本文标签： javascriptRendering part of a React function component after async call gets completedStack Overflow