React-传递回调是不好的做法吗？

Question

I have a REACT app which is basically a till for adding items to an order. I have my OrderSection which does most of the grunt work, including having a barcode scanner, and I have my Search component which is a child of OrderSection, and if someone clicks on a search result it passes that back up to OrderSection via a prop callback.

Now, this is what I initially had, but it had problems:

@autobind
class OrderSection extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            orderItems: [],
            multiMatch: [],
        };
    }

    async barcodeScanner(barcode) {
        let response;
        try {
            response = await serverApi.getItemsFromBarcode(barcode);
        } catch(e) {
            return toast.error(e.message || e.toString());
        }

        let {items} = response;

        if (items.length === 0) {
            toast.info('no matching items found');
        } else if (items.length === 1) {
            this.addItem(items[0]);
        } else {
            // show results in the 'search' section
            this.setState({multiMatch: items})
        }
    }

    addItem(item) {
        // doesn't really matter what happens here
    }

    async lookupAdd(no, code) {
        try {
            let {items} = await serverApi.getItems(no, code);
            let item = items[0];
            if (item) {
                this.addItem(item);
            } else {
            }
        } catch(e) {
            toast.error(e.toString());
        }
    }

    render() {
        return (
            <section>
                // render items up here

                <Search  
                    onItemClick={this.lookupAdd} 
                    results={this.state.multiMatch} />
            </section>
        )
    }
}



@autobind
class Search extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            searchResults: [],
            show: false // change to true to show the search
        }
    }

    // code for updating search results on form submit
    // updating this.state.searchResults

    render() {
        return (
            <React.Fragment>
                // form with search text input here
                // render searchResults here
            </React.Fragment>
        )
    }

    componentWillReceiveProps(props) {
        if (props.results.length) {
            this.setState({searchResults: props.results, show: true});
        }
    }
}

Search.propTypes = {
    onItemClick: PropTypes.func.isRequired,
    results: PropTypes.array
};

The main issue here is how in OrderSection, in barcodeScanner, when I have multiple matches, I pass them down as a prop into Search, and then Search sees that prop and updates itself in the componentWillReceiveProps function.

I wasn't entirely happy with what was happening there -- it was actually fine most of the time, but there was some annoying unexpected behaviour of Search showing itself when the prop actually hadn't changed.

So I came up with the idea of passing a callback up from Search to OrderSection:

@autobind
class OrderSection extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            orderItems: []
        };
    }

    async barcodeScanner(barcode) {
        let response;
        try {
            response = await serverApi.getItemsFromBarcode(barcode);
        } catch(e) {
            return toast.error(e.message || e.toString());
        }

        let {items} = response;

        if (items.length === 0) {
            toast.info('no matching items found');
        } else if (items.length === 1) {
            this.addItem(items[0]);
        } else {
            // show results in the 'search' section
            this.sendMultiMatchToSearch(items);
        }
    }

    setSearchResultsFunc(func) {
        this.sendMultiMatchToSearch = func;
    }

    addItem(item) {
        // doesn't really matter what happens here
    }

    async lookupAdd(no, code) {
        try {
            let {items} = await serverApi.getItems(no, code);
            let item = items[0];
            if (item) {
                this.addItem(item);
            } else {
            }
        } catch(e) {
            toast.error(e.toString());
        }
    }

    render() {
        return (
            <section>
                // render items up here

                <Search
                    onItemClick={this.lookupAdd}
                    manuallySetResultsFunc={this.setSearchResultsFunc}
                     />
            </section>
        )
    }
}



@autobind
class Search extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            searchResults: [],
            show: false // change to true to show the search
        };

        if (typeof this.props.manuallySetResultsFunc === "function") {
            const func = (results) => {
                this.setState({searchResults: results, show: true});
                this.flash();
            };
            this.props.manuallySetResultsFunc(func);
        }
    }

    render() {
        return (
            <React.Fragment>
                // render searchResults here
            </React.Fragment>
        )
    }
}

Search.propTypes = {
    onItemClick: PropTypes.func.isRequired,
    manuallySetResultsFunc: PropTypes.func
};

But I feel like this is probably bad react practice. It's producing the behavior I want but I think if a React expert looks at this they wouldn't like it.

Can I get some advice on the proper way to pass search results down to Search to trigger it, while still otherwise allowing the SEARCH element to control its own searchResults code

Answer 1

You're right in that you shouldn't have to 'intervene' in this way to modify how your state is updated. You should just set up your state and props and then things should take care of themselves.

Here are some straightforward approaches that I'd typically use:

1) From the OrderSection parent to conditionally render your Search only when there are items:

render() {
        return (
            <section>
                {this.state.multiMatch && <Search
                    onItemClick={this.lookupAdd}
                    manuallySetResultsFunc={this.setSearchResultsFunc}
                     />}
            </section>
        )
    }

2) Within the <Search> child:

render() {
        return (
            <React.Fragment>
                {this.state.searchResults && this.state.searchResults.map(result=> // map to SearchResults)}
            </React.Fragment>
        )
    }

3) From the OrderSection parent pass in 'isShowing' as a prop:

render() {
        const isShowing = !!this.state.multiMatch; // add other logic here if necessary
        return (
            <section>
                 <Search
                    onItemClick={this.lookupAdd}
                    isShowing={isShowing}
                     />
            </section>
        )
    }

Then in your Search, extract isShowing from props.

The idea is that you only need to update the state and the rendering should take care of itself.

Answer 2

I would introduce additional props to Search component showMultiMatch and onSearchClose and add showSearch to OrderSection component(which is set to true when you receive multiMatch and set to false in the onSearchClose handler). Remove componentWillReceiveProps and check condition this.props.showMultiMatch || this.state.show this.props.showMultiMatch || this.state.show in the render function to render search conditionally.