Question

我正在使用 "react-scripts": "4.0.2" 并且我的所有组件都是 React Hook。我的逻辑涉及嵌套路由，但未呈现最终结果。

App.js：

<BrowserRouter>
  <div className="App">
    <TopNav />
    <Home />
  </div>
</BrowserRouter>

Home.js：

<Switch>
    <Route path="/" component={Questions} />
</Switch>

Questions.js

    const displayQuestion = (qid) => {
         props.history.push({ pathname: "/question/" + qid });
      };
    
//questions is an array of objects

      const questionsBlocks = questions.map((quest, i) => {
        return (
          <QBlock
            key={i + 1}
            qno={i + 1}
            displayQuestion={displayQuestion.bind(this, quest.qid)}
          />
        );
      });
    
      return (
        <div>
          <h1>Questions</h1>
          {questionsBlocks}
          <Switch>
            <Route
              path="/question/:id"
              render={(props) => <Question {...props} questions={questions} />}
            />
          </Switch>
        </div>
      );

QBlock 只会渲染点击时调用 displayQuestion 的按钮

QBlock.js：

  return (
    <div className="block" onClick={props.displayQuestion}>
      <h1>{props.qno}</h1>
    </div>
  );

Question.js：

const [question, setQuestion] = useState();

  const loadQuestion = () => {
    console.log(props);
    if (props.match.params.id) {
      console.log("load called");
      const qid = props.match.params.id;
      const index = props.questions.findIndex((quest) => quest.qid == qid);
      setQuestion(props.questions[index]);
    }
  };

  // componentDidMount with react hooks
  useEffect(() => {
    console.log("Mounted");
    loadQuestion();
  }, []);

  // componentDidUpdate with react hooks
  useEffect(() => {
    console.log("Updated");
    loadQuestion();
  }, [props.match.params.id]); //Even tried with only props

  return (
    <div className="Quest">
      <div className="question">{question.question}</div>
      <div className="options">{question.answerChoices}</div>
    </div>
  );

useEffect 的 Question.js 都没有执行，我仍然收到以下错误。

Answer 1

基本上需要初始化question

const [question, setQuestion] = useState(null);

另外你需要做的事情是在使用之前检查 question 的值

return (
    <div className="Quest">
      {question && question.question && <div className="question">{question.question}</div>}
      {question && question.answerChoices && <div className="options">{question.answerChoices}</div>}
    </div>
  );

Answer 2

正如文斯所说......我已经将 useState 定义为 const [question, setQuestion] = useState(); 而不是 const [question, setQuestion] = useState({});

React Hooks：组件未在嵌套路由中呈现

2 个答案: