Typescript,ReactでuseStateを使って、配列の中の値を変更する。

Question

前提・実現したいこと

Typescript,Reactで関数コンポーネントで親のUseSstate配列で、子供のフォームの値を管理したいです。
その中で、formの中身（複数を変更する処理があり、それがうまくいきません。
onChangeformのstateを変更する関数の部分でうまく変更できません。
なにか実装経験がある方いらっしゃいましたらご教示お願い致します。

親側

const [state, setState] = useState<string[]>([{
name:"",
address:"",
};
const initialObject: Carrers = {
    name: '',
    address: '',

  };
// 親側 
  const onChangeform = (index: number, value: any) => {
    const newCarrer = state;
    newCarrer[index].name = value;
    setState(newCarrer);
console.log(state.index.name)
  };
// 配列を増やす
  const addForm = () => {
    setState([...state, initialObject ]);
  };
  return(
        <Wrap>
            {
              state.map((data, index) => (
                <Form
                  addForm={addForm}
                  key={index}
                  data={data}
                  index={index}
                  onChangeform={onChangeform}
                />
              ))
            }
        </Wrap>
    );

試したこと

子コンポーネントのフォーム上で値を変更しようとするとconsoleで一文字ずつ表示されてしまいます。

console例
a
a
a
a

Comments

[maisumakun]

<Form>の定義はどのようなものでしょうか。

[kaorun343]

useState に渡している型が違っています。 state の型は Careers[] ではないでしょうか？

[taihe-]

こちら業務でつかっているものを書き換えている際に間違えたものでした
一旦string[]という認識で大丈夫です。

Answer 1

以下のような実装にすると動くと思います。

import React, {FC, useState, useCallback } from 'react';

type Carrers = Readonly<{ name: string, address: string }>;

type Props = {
  addForm(): void;
  data: Carrers;
  index: number;
  onChangeForm(name: string): void ;
}

const Form: FC<Props> = ({ addForm, data, index, onChangeForm }) {
  const handleNameChange = useCallback(e => {
    const value = e.target.value;
    onChangeForm(index, value);
  });

  return (
    <form>
      <div>
        <label>
          Name:
          <input value={data.name} onChange={handleNameChange} />
        </label>
      </div>
      <button type="button" onClick={addForm}>
        Add form
      </button>
    </form>
  );
}

const initialObject: Carrers = {
  name: "",
  address: ""
};

const App: FC = () => {
  const [state, setState] = useState([initialObject]);

  const onChangeForm = useCallback((index: number, name: string) => {
    setState(currentState => {
      const currentData = currentState[index];
      const newData: Carrers = { ...currentData, name };

      const newState = currentState.slice();
      newState[index] = newData;

      return newState;
    });
  }, []);

  const addForm = useCallback(() => {
    setState([...state, initialObject]);
  }, []);

  return (
    <div className="App">
      <h1>フォーム</h1>
      {state.map((data, index) => (
        <Form
          key={index}
          addForm={addForm}
          data={data}
          index={index}
          onChangeForm={onChangeForm}
        />
      ))}
      <h1>（確認用）</h1>
      {state.map((data, index) => (
        <div key={index}>
          <div>name: {data.name}</div>
          <div>address: {data.address}</div>
        </div>
      ))}
    </div>
  );
}

onChangeForm 関数内で state を更新していますが、いくつか注目して欲しいところがあります。

まず、useCallback を用いてレンダリング毎に同じ関数を用いるようにしています。

次に、setState に対して関数を渡しその中で新しい newState を生成しています。その関数は現在の値である currentState を受け取っています。こうすることで useState から返される state を監視しなくて済み、useCallback が常に同じ関数を返すようにできています。

そして、既存のオブジェクトを変更せずに newState を生成しています。Reactでは破壊的な変更を加えると場合によっては正しく動かない場合があるので（shallow equalによる値のチェックをする時）、例に示したように非破壊的な操作をするのが良いです。

Comments

[taihe-]

こちらで正常に動作しました
ありがとうございます！