React-hooks не обновляет состояние

Question

Некоторые данные о совпадениях взяты из родительского класса, и я инициализировал совпадения с помощью useState (match). Однако данные совпадений содержат старые данные и не были обновлены как родительские данные совпадений. Кто-нибудь поможет?

const FixtureDetailItem = ({ type, match, teams, isAdmin, postMatchesStart, putMatchesStart }) => {
  console.log(match)
  const [matches, setMatches] = useState(match);
  const { homeTeamId, homeTeamName, homeScore, awayTeamId, awayTeamName, awayScore, scheduledAt, location, league, matchRecords} = matches;

  useEffect(() => {
    console.log('fired')
    console.log(matches)
    setMatches(matches)
  }, [matches]);

Answer 1

Кажется, что существует круговое соединение между useEffect() и useState - useEffect имеет зависимость matches, затем устанавливает совпадения.

Если вы хотите, чтобы оно изменилось при изменении match , тогда match должно быть зависимостью.

Обратите внимание, что useState(match) запускается только при самом первом рендере. При последующих рендерингах вы должны использовать setMatches(), чтобы изменить значение matches.

const FixtureDetailItem = ({ type, match, ... }) => {

  const [matches, setMatches] = useState(match);
  const { ... } = matches;

  useEffect(() => {
    setMatches(match)
  }, [match]);

  ... // JSX here

}

---

@ James I, хотя это может потребовать некоторого пояснения.

См. Мое утверждение выше - useState (match) запускается только при самом первом рендере .

При первом рендеринге useState(match) устанавливает matches равным match.

Затем родитель изменяет match, и, поскольку изменилась пропозиция совпадения, функция FixtureDetailItem запускается снова , но React не запускает useState(match) для нового значения (по проекту).

Он считает matches внутренним состоянием этого компонента и оставляет его со старым значением.

Поскольку matches не изменяется, эффект не запускается - он запускается только при изменении одной из его зависимостей.