Question

我正在学习反应，我有一个奇怪的情况，理论上很简单，但是我不知道如何解决。最初，我使用props.children，我想在得到响应时呈现部分代码。我有点以一种奇怪的方式解决它，但是我仍然有错误。因此，看看：

function AddCards(axiosResponse) {

  const [cardsCode, setCardsCode] = React.useState(null);

  const handleGetCards = (newCode) => {
    setCardsCode(newCode);
  };

  var firstText = null;
  var cards = axiosResponse;
  if (cards[0]) {
    firstText = [];
    firstText.push( <div>
      <h1>{cards[0].title}</h1>
      <p>{cards[0].text}</p></div>
    );
    handleGetCards(firstText);
  }

  return (
    <ButtonAppBar>
      {cardsCode}
    </ButtonAppBar>
  );
}

function makeRequest() {
  axiosCall(AddCards);
}

makeRequest();

ReactDOM.render(<AddCards />, document.querySelector('#root'));

我想做的是从axiosCall()获得响应，该响应返回一个字典数组，并在AddCards函数中使用它。我遇到了很多错误，为避免这种情况，我使用了函数makeRequest，该函数调用axiosCall，该函数调用AddCards作为回调（也许有人知道更好的解决方案，因为我认为这太可怕了）。但是好吧，现在我试图使其工作，我创建了状态，因此当它更改时应重新渲染react，并且默认情况下将其设置为null。 if (cards[0])会检查响应是否到来，并应更改状态。但是我有一个错误Unhandled Rejection (Error): Invalid hook call。我该怎么解决？

Answer 1

您可以将请求响应作为> a names_a values_a 1 a 1 2 b 2 3 c 3 4 d 4 > a34 names_b values_b 1 a 5 2 b 6 3 e 7 4 f 8传递给组件：

prop

或者您使用useEffect钩子：

function AddCards(props) {
  const response = props.response;
  // do stuff with data here
}

function makeRequest() {
  // some further logic here
  axiosCall();
}

makeRequest().then((response) => {
  ReactDOM.render(<AddCards response={response}/>, document.querySelector('#root'));
});

反应，延迟渲染和钩子

1 个答案: