有時未經授權，有時返回響應，在 React 中使用 fetch

Question

我希望你能幫助我。

我正在做一個簡單的獲取，希望它在 DOM 被渲染之前被執行。

但是，有時它會因未授權而返回 401 答案，因為道具未定義，有時它會返回正確答案。

建議？

constructor(props) {
    super(props);
    this.state = { 
        renderizado: false,
        token: props.token,
    };
}

componentDidMount() {
        const test = this.state.token;
        if(test !== undefined){
            fetch("url",
                {
                    headers: {
                        "X-Requested-With": "XMLHttpRequest",
                        "Content-Type": "application/json",
                        Authorization: "Bearer " + test,
                    },
                }
            ) 
            .then(response => response.json())
            .then(data => this.setState({ data: data, renderizado: true }));
        }
        else
        {
            console.log("viene undefined");
        }
    }   

render() {
        return (
            <div>
                { this.state.renderizado ? <h1>Cargado</h1> : null }
            </div>
        );
    }

我已經在這兩天了，我是一個業余愛好者。

謝謝你。

Answer 1

試試這個：（基本上我所做的就是從componentDidMount更改為componentDidUpdate ）

constructor(props) {
  super(props);
  this.state = {
    renderizado: false,
    token: props.token,
    data: null,
  };
}

componentDidUpdate() {
  const { token } = this.state;
  if (token) {
    fetch('url', {
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/json',
        Authorization: 'Bearer ' + token,
      },
    })
      .then((response) => response.json())
      .then((data) => this.setState({ data, renderizado: true }));
  } else {
    console.log('viene undefined');
  }
}

render() {
  const { renderizado, data } = this.state;

  return (
    <div>
      {renderizado ? (
        <h1>
          <pre>{JSON.stringify(data, null, 4)}</pre>
        </h1>
      ) : null}
    </div>
  );
}

Answer 2

你試過if(test != undefined)嗎？

Answer 3

也許那是一個 Promise 尚未解決，並且該組件之前有時已安裝。