Question

我在 render() 中有一个设置状态值的异步函数。

我还有一个基于状态值呈现的函数。

但是，在this.renderSomething()中，如果我加入async函数，它会使用初始值（null）而不是async函数“function”设置的值.

这是因为渲染不会等待 this.state { value: null } componentDidMount = async () => { await function().then(result => { this.setState({value = result}) } renderSomething(){ if(this.state.value == 1 ) return ( <div> ... </div> ) } render(){ return ( <div> {this.renderSomething()} </div> 函数完成。

如何才能添加一个仅在获得值后才呈现的函数？

    <script>
    var members = <?php echo json_encode($itemId); ?>;
    $(document).ready(function(){
        var max_fields = 15;
        var wrapper = $(".more");
        var add_button = $(".add");
        var x = 1;
        $(add_button).click(function(e){
            e.preventDefault();
            if (x < max_fields){
                x++;
                $(wrapper).append('<div class="row"><div class="col-sm-3 mb-3"><select name="product[]" id="item'+x+'" class="form-control shadow-sm" required><option value="" selected disabled>Select product</option>'+members+'</select></div><span id="price'+x+'"></span><div class="col-sm-2 mb-3"><input type="number" name="quantity[]" class="form-control shadow-sm" placeholder="Quantity" required></div><div class="col-sm-3 mb-3"><button class="delete btn btn-danger shadow-sm">Delete Product</button></div></div>');
        
                $("select[name='product[]']").change(function(){
                    var item = $("#item"+x).val();
                    $.ajax({
                        url:"check.php",
                        method:"POST",
                        data:{product:item},
                        dataType:"Text",
                        success:function(html){
                            $("#price"+x).html(html);
                        }
                    })
                });
            }else{
                alert('You Reached the limits')
            }
        });
        $(wrapper).on("click", ".delete", function(e){
            e.preventDefault();
            $(this).parents('.row').remove();
            x--;
        });
    });
    </script>

Answer 1

对于您的情况，也许您可以尝试将函数 renderSomething() 移动到 render() 方法并将其更改为变量 let renderSomething 以存储要基于 {{1} 呈现的 JSX 组件}}。

有关更多信息，您可以再次查看 React 文档 https://reactjs.org/docs/conditional-rendering.html#element-variables

this.state.value

希望能帮到你

(REACTJS) 如何只在异步函数完成后渲染？

1 个答案: