微調器不顯示在反應組件上

Question

我有一個顯示帶有輸入和按鈕的卡片的反應組件。 我希望當我單擊按鈕時顯示微調器，同時在單擊按鈕后有一個 axios post 請求在服務器上寫入一些數據。 問題是單擊按鈕后我看不到旋轉網，我只在請求完成后看到消息（單擊后 2-3 秒）

function User(props) {

    const [memo, setMemo] = useState('');
    const [isUpdated, setIsUpdated] = useState(false);
    const [spinner, setSpinner] = useState(false);

 
    const onClickForm = (e) => {
        e.preventDefault();
        let inputValue = document.getElementById(inputId);

        setSpinner(true);

        axios.post(url, {
            body: {
                "internalid": props.internalid,
                "memo": memo
            },
            headers: {"Content-Type": "application/json"},
            redirect: 'follow'
        }).then(response => {
                console.log(response.data[0]);
                setSpinner(false);
                if (response.data[0].Success) {
                    setIsUpdated(true);
                }
            }, (error) => {
                setIsUpdated(true);
                setSpinner(false);
                console.log(error)
            }
        )
        setMemo('')
        inputValue.value = '';
    }

    

    return (
        <div key={props.index}>
            <form onSubmit={e => onClickForm(e)}>
                <Card className="card" key={props.index}>
                    <Card.Content>
                        <Card.Header>{props.tranid}</Card.Header>
                        <Card.Description>
                            {props.name}
                        </Card.Description>
                        <br/>
                        {!isUpdated ? (
                            <div>
                                <Input id={inputId} placeholder='Write to memo'
                                       onChange={(e) => setMemo(e.target.value)}/>
                                <br/>
                                <button style={{marginTop: 20}} className="ui inverted blue button">Submit Change
                                </button>
                            </div>
                        ) : (
                            <div>
                                {!spinner ? <p style={{color: 'green'}}>UPDATED!</p> : <CircularProgress/>}
                            </div>
                        )
                        }
                        )}
                    </Card.Content>
                </Card>
            </form>
        </div>
    )
}

Answer 1

似乎隨着條件的設置，當!isUpdated then <CircularProgress />可能不會呈現，即使spinner是true 。

在條件渲染輸出中，也許嘗試：

  {!isUpdated && !spinner && (
    <div>
      <Input
        id={inputId}
        placeholder="Write to memo"
        onChange={(e) => setMemo(e.target.value)}
      />
      <br />
      <button style={{ marginTop: 20 }} className="ui inverted blue button">
        Submit Change
      </button>
    </div>
  )}
  {!isUpdated && spinner && <CircularProgress />}
  {isUpdated && !spinner && <p style={{ color: "green" }}>UPDATED!</p>}

或者如果首選三元運算符：

  {isUpdated ? (
    <p style={{ color: "green" }}>UPDATED!</p>
  ) : spinner ? (
    <CircularProgress />
  ) : (
    <div>
      <Input
        id={inputId}
        placeholder="Write to memo"
        onChange={(e) => setMemo(e.target.value)}
      />
      <br />
      <button style={{ marginTop: 20 }} className="ui inverted blue button">
        Submit Change
      </button>
    </div>
  )}