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

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 => {

  const index = selectedCharacters.indexOf(

    e.target.value

  );

  if (index === -1) {

    // creating a new array with [], so the original one stays intact

    setSelectedCharacters([...selectedCharacters, e.target.value]);

  } else {

    // Array.filter also creates new array

    setSelectedCharacters(selectedCharacters.filter((char, i) => i !== index));

  }

}}

文档在这里https://en.reactjs.org/docs/hooks-reference.html#usestate