React useState - странное поведение с useState и массивами - PullRequest
Новая
       130

React useState - странное поведение с useState и массивами

0 голосов
/ 07 августа 2020

Используя приведенный ниже пример компонента, передача «установщика» из useState в дочерний элемент отлично работает для строки, но не для массива. В нем говорится, что установщик (только для массива) не является функцией. Использование сеттера в родительском элементе работает хорошо. Обход этого метода путем вызова метода в родительском элементе также работает, но я не понимаю, почему это необходимо.

Почему он так себя ведет? 

import React, { useState } from 'react';

function App() {

  const [testString, setTestString] = useState('initial string value');
  const [testSimpleArray, setTestSimpleArray] = useState(['one initial', 'two initial']);

  const handleArrayChange = (arg) => {
    setTestSimpleArray(arg);
  }


  return (
    <>
      <Subcomponent
        testString={testString}
        setTestString={setTestString}
        testSimpleArray={testSimpleArray}
        setSimpleArray={setTestSimpleArray}
        altArrayChanger={handleArrayChange}

      ></Subcomponent>

      <button onClick={() => setTestSimpleArray(['new from parent', 'new two from parent'])}>Set array in parent (works)</button>
    </>
  );
}

Подкомпонент 

function Subcomponent({testString, setTestString, testSimpleArray, setTestSimpleArray, altArrayChanger}) {
  
  
    return (
      <>
        <div>
          <h2>String</h2>
          {testString} <br />
          <button onClick={() => setTestString('boo')}>setting string from subcomponent is ok</button>
        
          <h2>Array</h2>
          {JSON.stringify(testSimpleArray)} <br />
          <button onClick={() => setTestSimpleArray(['new from subcomponent', 'new two from subcomponent'])}>Set array in subcomponent fails</button>

          <button onClick={() => altArrayChanger(['new alt from subcomponent', 'new alt two from subcomponent'])}>Workaround (call parent event to do the update there)</button>

        </div>
      </>
    );
  }
  
export default App;

1 Ответ

0 голосов
/ 07 августа 2020

Проблема

Subcomponent определена, чтобы принять setTestSimpleArray prop 

Subcomponent({
  testString,
  setTestString,
  testSimpleArray,
  setTestSimpleArray, // <--
  altArrayChanger
})

Но вместо этого передается prop setSimpleArray 

<Subcomponent
  testString={testString}
  setTestString={setTestString}
  testSimpleArray={testSimpleArray}
  setSimpleArray={setTestSimpleArray} // <--
  altArrayChanger={handleArrayChange}
/>

Решение

Пропустить опору правильно 

<Subcomponent
  testString={testString}
  setTestString={setTestString}
  testSimpleArray={testSimpleArray}
  setTestSimpleArray={setTestSimpleArray} // <--
  altArrayChanger={handleArrayChange}
/>

Отредактируйте response-usestate-unknown-behavior-with-usestate-and-array

...