Saat ini saya sedang mengerjakan survei yang sangat sederhana. Jenis yang Anda jawab dengan Ya atau Tidak. Saya telah membuat daftar pertanyaan yang telah saya masukkan dan ekstrak dalam file sendiri (QuestionsList.js).

Ini daftar pertanyaan saya:

const QuestionsList = [
"Do you believe in ghosts? ",
"Have you ever seen a UFO? ",
"Can cats jump six times their length? "
]
export default QuestionsList

Saya memiliki Aplikasi saya:

import './App.css';
import Question from './components/Question';
import QuestionsList from './QuestionsList'
import { useState } from 'react';

function App() {
  let questionsList = QuestionsList
  const [current, setCurrent] = useState(0)
  const [currentQuestion, setCurrentQuestion] = useState(null)
  const [answers, setAnswers] = useState([])
  const [isStarted, setIsStarted] = useState(false)

  const onStartHandler = () => {
    setIsStarted(true)
    updateCurrentQuestion()
  }

  const updateCurrentQuestion = () => {
    setCurrentQuestion(questionsList[current])
  }

  const onYesHandler = () => {
    setCurrent(current => current += 1)
    setAnswers([...answers, 1])
    updateCurrentQuestion()
  }
  const onNoHandler = () => {
    setCurrent(current => current += 1)
    setAnswers([...answers, 0])
    updateCurrentQuestion()
  }
  return (
    <div className="App">
      {isStarted ? <Question question={currentQuestion} onYes={onYesHandler} onNo={onNoHandler} /> : null}
      <button onClick={onStartHandler}>START!</button>
      <button onClick={() => console.log(`Current: ${current}\nCurrent Question: ${currentQuestion}\nAnswers: ${answers}`)}>STATE LOG</button>
    </div>
  );
}

export default App;

Dan komponen Pertanyaan saya:

import React from 'react'

const Question = (props) => {

    return (
        <div>
            <h2>{props.question}</h2>
            <div>
                <button onClick={props.onYes}>YES</button>
                <button onClick={props.onNo}>NO</button>
            </div>
        </div>
    )
}

export default Question

Masalahnya adalah setiap kali saya meluncurkan aplikasi. Pertanyaan pertama muncul, tetapi pada klik PERTAMA pada YA atau TIDAK, statusnya berubah dan begitu juga pertanyaannya, tetapi klik PERTAMA, tidak merender pertanyaan. Namun, setiap klik berikutnya akan merender ulang komponen tersebut. Apa yang saya lewatkan?

0
Worthy Dev 16 Januari 2021, 02:37

3 jawaban

Jawaban Terbaik

Saat Anda memanggil setCurrentQuestion(), ia menggunakan nilai current sebelumnya karena menyetel status (yang dilakukan setCurrent) adalah asinkron.

Anda tidak memerlukan status currentQuestion, karena ini berasal dari current. Gunakan nilai current untuk mendapatkan pertanyaan dari questionsList.

const { useState } = React;

const Question = (props) => {
    return (
        <div>
            <h2>{props.question}</h2>
            <div>
                <button onClick={props.onYes}>YES</button>
                <button onClick={props.onNo}>NO</button>
            </div>
        </div>
    )
}

function App({ questionsList }) {
  const [current, setCurrent] = useState(0)
  const [answers, setAnswers] = useState([])
  const [isStarted, setIsStarted] = useState(false)

  const onStartHandler = () => {
    setIsStarted(true)
  }

  const onYesHandler = () => {
    setCurrent(current => current += 1)
    setAnswers([...answers, 1])
  }
  const onNoHandler = () => {
    setCurrent(current => current += 1)
    setAnswers([...answers, 0])
  }
  return (
    <div className="App">
      {isStarted ? (
        <Question 
          question={questionsList[current]}
          onYes={onYesHandler}
          onNo={onNoHandler} />
        )
        :
        (
          <button onClick={onStartHandler}>START!</button>
        )
      }
    </div>
  );
}

const QuestionsList = [
  "Do you believe in ghosts? ",
  "Have you ever seen a UFO? ",
  "Can cats jump six times their length? "
];

ReactDOM.render(
  <App questionsList={QuestionsList} />,
  root
);
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>
0
Ori Drori 15 Januari 2021, 23:45

Tetapkan status awal

Solusi sederhana:

Ganti ini const [currentQuestion, setCurrentQuestion] = useState(null)

Dalam const [currentQuestion, setCurrentQuestion] = useState(questionsList[current]) ini


BTW saya melihat beberapa hal untuk ditingkatkan.

  • onYesHandler onNoHandler dapat menjadi salah satu fungsi yang mendapatkan boolean (benar atau salah untuk ya atau tidak)
  • Anda tidak perlu menyimpan data yang Anda impor let questionsList = QuestionsList. anda dapat menggunakannya dari impor sebagai QuestionsList

Tapi lumayan lah buat pemula :)

0
Omer 15 Januari 2021, 23:48

  const updateCurrentQuestion = (num) => {
    setCurrentQuestion(questionsList[num])
  }
   // within no/yes functions
   let num = current;
   setCurrent(old => old + 1);
   updateCurrentQuestion(num);

Ini harus memperbaikinya. UpdateCurrentQuestion semakin melewati keadaan.

0
marsh 15 Januari 2021, 23:50