как переключить язык из массива с реагирующими хуками

Question

Я хочу изменить язык цитаты с французского на английский sh или наоборот, когда я нажимаю кнопку «lang button», цитата генерируется случайным образом из массива при запуске страницы. это мой массив:

const quoteData = [
  {
    quoteEn:
      "Three things cannot be long hidden: the sun, the moon, and the truth.",
    quoteFr:
      "Trois choses ne peuvent pas être cachées longtemps : le soleil, la lune et la vérité.",
    author: "Buddha"
  },
  {
    quoteEn:
      "We make a living by what we get, but we make a life by what we give.",
    quoteFr:
      "On vit de ce que l’on obtient. On construit sa vie sur ce que l’on donne.",
    author: "Winston Churchill"
  }

export default quoteData;

, и это то, что я пробовал:

import React, { useState } from "react";
import quoteData from "./components/quoteData";
import "./App.css";
import { ReactComponent as Github } from "./icons/github-brands.svg";

function App() {
  const getRandomQuotes = () => {
    const randNumb = Math.floor(Math.random() * quoteData.length);
    return quoteData[randNumb];
  };

  const [quote, setQuote] = useState(getRandomQuotes());
  const [author, setAuthor] = useState(getRandomQuotes().author);
  const [lang, setLang] = useState("En");
  const [nextBtn, setNextBtn] = useState("Next");

  const handleClickLang = () => {
    if (lang === "Fr") {
      setLang("En");
      setNextBtn("Next");
      setQuote(quote.quoteFr);
    } else {
      setLang("Fr");
      setNextBtn("Suivant");
      setQuote(quote.quoteEn);
    }
  };

  return (
    <div id="quote-box">
      <div className="c1">
        <div className="lang">
          <button onClick={handleClickLang} className="changeLang">
            {lang}
          </button>
        </div>
        <div className="card flow">
          <p id="text">{quote}</p>
          <p id="author">{author}</p>
        </div>
      </div>
      <div className="c2">
        <Github id="github" />
        <button onClick={handleClickRandomQuote} id="new-quote">
          {nextBtn}
        </button>
      </div>
    </div>
  );
}

export default App;

, и я получаю эту ошибку: Ошибка: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {quoteEn, quoteFr, автор}).

Answer 1

Вы сохраняете в своем quote состоянии объект (тот, который вы случайным образом выбираете из массива quoteData), а не строка для кавычки. Это неплохо, так как вы также хотите показать автора произвольно выбранной вами цитаты.

Кроме того, когда вы делаете:

const [quote, setQuote] = useState(getRandomQuotes());
const [author, setAuthor] = useState(getRandomQuotes().author);

Вы должны принять во внимание, что первое выполнение getRandomQuotes вернет случайную кавычку, которая не должна совпадать со вторым вызовом getRandomQuotes, чтобы получить автора. Это может привести к тому, что ваши данные (цитата и автор) не будут синхронизированы c.

Таким образом, кажется, что хранить автора отдельно от цитаты не нужно. Учитывая все это, вы можете сделать что-то вроде:

function App() {
  const getRandomQuotes = () => {
    const randNumb = Math.floor(Math.random() * quoteData.length);
    return quoteData[randNumb];
  };

  const [quote, setQuote] = useState(getRandomQuotes());
  const [lang, setLang] = useState("En");
  const [nextBtn, setNextBtn] = useState("Next");

  const handleClickLang = () => {
    if (lang === "Fr") {
      setLang("En");
      setNextBtn("Next");
    } else {
      setLang("Fr");
      setNextBtn("Suivant");
    }
  };

  return (
    <div id="quote-box">
      <div className="c1">
        <div className="lang">
          <button onClick={handleClickLang} className="changeLang">
            {lang}
          </button>
        </div>
        <div className="card flow">
          <p id="text">{quote[`quote${lang}`]}</p>
          <p id="author">{quote.author}</p>
        </div>
      </div>
      <div className="c2">
        <Github id="github" />
        <button onClick={handleClickRandomQuote} id="new-quote">
          {nextBtn}
        </button>
      </div>
    </div>
  );
}