1

react のhooksを使ってsetStateを呼びだしたときに、再レンダリングが走りません。
なぜでしょうか?
todoアプリのdeleteを押したときに、stateの値は更新されているようですが、再描画が走りません。
stateには配列を入れて、更新をしているはずなのですが。。
以下、コードです。

// app.txs
const App = () =>{
const [todo, setTodo] = React.useState<String[]>([])
// データ保存
function handleAdd(e:any){
    e.preventDefault()
    setTodo(todo.concat(e.target.title.value))
    e.target.title.value=""
}
// データ削除
const handleRemove = (i:number)=>{
    // todo 配列のi番目から1つ目のデータを除外
    todo.splice(i,1)
    setTodo(todo)
    console.log(todo)
}
return(
    <div>
        <h1>React Todo App</h1>
        <Form handleAdd={handleAdd} />
        <div></div>
        <List todos={todo} handleRemove={handleRemove} />
    </div>
)
}
ReactDOM.render(<App/>, document.getElementById("app"))


// List.tsx
const List = (props: any) =>{
return (
<ul>
    {props.todos.map((v:any, i:any) =>{
        return <li key={i}>{v} <span style={{cursor: "pointer"}} onClick={()=>{props.handleRemove(i)}}>delete</span></li>
    })}
</ul>
)}
export default List

  

0

2 件の回答 2

3

useState hookでは、同じ値で更新した場合、子のレンダリングを回避します。ここで "同じ値" の意味はObject.is(古いstate, 新しいstate)trueという意味です。

出典: https://ja.reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update

state 更新の回避

現在値と同じ値で更新を行った場合、React は子のレンダーや副作用の実行を回避して処理を終了します。(React は Object.is による比較アルゴリズム を使用します)

添付されたコードを見るとtodo.splicetodoを直接変更し、その同じtodoArrayインスタンスをsetTodoに渡しているため、Object.isによる比較はtrueとなることが推察されます。

以下、解決策のひとつです。

const handleRemove = (i: number) => {
    // todo をコピーして、新しいArrayインスタンスを作成する。
    const newTodo = [...todo];
    // ここで Object.is(todo, newTodo) === false となります。
    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is

    // newTodo 配列のi番目から1つ目のデータを除外
    newTodo.splice(i, 1);

    setTodo(newTodo);
}

もしくは次のようにも書けます。

const handleRemove = (i: number) => {
    setTodo([...todo.slice(0, i), ...todo.slice(i + 1)]);
}

なおhandleAdd内で使われているconcatは新しいArrayインスタンスを返すので子のレンダリングは必ず行われます。pushを使って直接変更し、同じtodoを渡した場合は再レンダリングされません。

// 再描画されない例
const handleAdd = (e) => {
    e.preventDefault();
    todo.push(e.target.title.value);
    setTodo(todo);
    console.log(todo); // 新しい要素が追加された`todo`が出力される
    e.target.title.value = "";
};
1
  • 丁寧な回答ありがとうございますm(_ _)m Commented 2019年9月4日 10:05
0

stateの配列の変更は、immutablity-helperなるものを使うそうです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。