重构以反应钩子后，地图中的复选框未在数组更新时更新

Question

我使用钩子将类组件转换为函数组件。目前，我正在努力弄清楚为什么这个地图中的复选框没有更新检查值，尽管 onChange 处理程序触发，并根据需要更新数组。（onSubmit 也可以正常工作，并正确更新数据库中的值）。

import {

  Container,

  Typography,

  Grid,

  Checkbox,

  FormControlLabel,

  Button

} from "@material-ui/core";

import Select from "react-select";

import localeSelect from "../services/localeSelect";

import {

  linkCharactersToGame,

  characterLinked,

  linkCharacters

} from "../data/locales";

import dbLocale from "../services/dbLocale";

import { LanguageContext } from "../contexts/LanguageContext";

import { UserContext } from "../contexts/UserContext";

import { GameContext } from "../contexts/GameContext";

import { CharacterContext } from "../contexts/CharacterContext";

import { Redirect } from "react-router-dom";

export default function LinkCharacter() {

  const { language } = useContext(LanguageContext);

  const { user } = useContext(UserContext);

  const { games, loading, error, success, connectCharacters } = useContext(

    GameContext

  );

  const { characters } = useContext(CharacterContext);

  const [game, setGame] = useState("");

  const [selectedCharacters, setSelectedCharacters] = useState([]);

  if (!user) {

    return <Redirect to="/" />;

  }

  return (

    <section className="link-character">

      <Container maxWidth="sm">

        <Typography variant="h5">

          {localeSelect(language, linkCharactersToGame)}

        </Typography>

        {error && (

          <p className="error">

            <span>Error:</span> {error}

          </p>

        )}

        {success && <p>{localeSelect(language, characterLinked)}</p>}

        <Select

          options={games.map(game => {

            return {

              label: dbLocale(language, game),

              value: game._id

            };

          })}

我觉得我在 Hooks 中遗漏了一些东西（或者 Hooks 处理类似这样的事情存在某种问题）。我一直在四处寻找和询问，但也没有其他人能够弄清楚这个问题。

Answer 1

state返回的内容[state, setState] = useState([])是您应该只阅读的内容。如果你修改它，React 不会知道数据已经改变并且需要重新渲染。当您需要修改数据时，您必须使用setState, 或在您的情况下使用setSelectedCharacters.此外，如果稍后在其他地方读取数组，则通过引用修改数据可能会导致不可预测的结果。除此之外，如果你给 相同的值setState，那个钩子返回给你state，React 将完全跳过更新。使用数字或字符串时这不是问题，但是当您使用数组时它会变成一个问题，因为引用（React 用来判断是否存在差异的值）可能是相同的，而内容可能已经改变。所以你必须将一个新数组传递给setState.考虑到这一点，您的onChange函数可能如下所示：onChange={e => {&nbsp; const index = selectedCharacters.indexOf(&nbsp; &nbsp; e.target.value&nbsp; );&nbsp; if (index === -1) {&nbsp; &nbsp; // creating a new array with [], so the original one stays intact&nbsp; &nbsp; setSelectedCharacters([...selectedCharacters, e.target.value]);&nbsp; } else {&nbsp; &nbsp; // Array.filter also creates new array&nbsp; &nbsp; setSelectedCharacters(selectedCharacters.filter((char, i) => i !== index));&nbsp; }}}文档在这里https://en.reactjs.org/docs/hooks-reference.html#usestate