时间戳

首页 > 解决方案 > useState 不重新渲染组件

javascript - useState 不重新渲染组件

问题描述

我正在使用 useState 钩子，但在更改状态后，组件不会自行渲染。我不知道我错过了什么。

import React, {useState} from 'react'
import List from '@material-ui/core/List'
import ListTile from "./components/ListTile/ListTile"
import style from './App.module.css'
import InputField from "./components/inputField/InputField";

const App = () => {
    const [list, setList] = useState([])

    const onFormSubmitHandler = (data) => {
        list.push(data)
        setList(list)
    }

    return (
        <div className={style.outerDiv}>
            <h1 className={style.center}>CLister</h1>
            <InputField onSubmit={onFormSubmitHandler}/>
            <List component="nav">
                {list.map((data, index) =>
                     <ListTile index={index} body={data}/>
                )}
            </List>
        </div>
    );
}

export default App

标签： javascriptreactjsreact-hooksuse-state

解决方案

请记住，您的状态不能通过推送来修改，因为修改它的方式是使用方法集

在方法中使用此代码onFormSubmitHandler

const onFormSubmitHandler = (data) => {
  setList(list => ([...list, data]))
}

最后请记住，如果您的表单将被提交，您需要将其打破e.prevent.default()

推荐阅读