javascript - 如何使用反应钩子从数组中切换语言

Question

当我单击“语言按钮”时，我想将引用的语言从法语更改为英语或反转，当页面启动时，引用是从数组中随机生成的。这是我的数组：

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、author} 的对象）。

标签： javascriptreactjsreact-hooks

Answer 1

您在您的quote状态中存储一个对象（您从数组中随机选择的quoteData那个），而不是引号的字符串。这还不错，因为您还想显示您随机选择的随机引用的作者。

另外，当你这样做时：

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

您必须考虑到第一次执行getRandomQuotes将返回一个随机引用，该引用不必与第二次调用getRandomQuotes以获取作者一致。这可能会导致您的数据（引用和作者）不同步。

因此，似乎没有必要将作者与引用分开存储。考虑到所有这些，您可以执行以下操作：

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>
  );
}