useState不重新渲染组件

如何解决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

解决方法

请记住，您的状态无法通过push进行修改，因为修改状态的方法是使用set方法

在方法onFormSubmitHandler

中使用此代码

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

最后要记住，如果您要提交表单，则需要用e.prevent.default()来破坏它

,

在列表中以reference类型键入js。如果您使用push修改列表

像list.push()一样，它也会修改您所在州的原始列表，因此您的州不会有任何变化。

示例

let list = [1,2,3,4];

let list2 = list;

// if I modify list2 now

list2.push(5);

console.log(list); // list also gets modified as,they are reference type

那么你能做什么

const onFormSubmitHandler = (data) => {
         let list2=[...list]; // creating a new variable from existing one 
        list2.push(data)
        setList(list2);
    }

或

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

,

Devise.secret_key

,

您以错误的方式进行编辑，应该直接将新值提供给setList函数，而不要尝试更新list变量。这就是为什么要使用该功能，而不更新原始值的原因。您要做的是使用函数中的先前状态和散布运算符，因为它是一个数组，而您只想添加一个项目：

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

您应该将list变量视为只读变量，而不要尝试对其进行修改，而应通过setList函数对其进行修改。

如果您要进行其他一些修改而不是仅添加项目：

const onFormSubmitHandler = (data) => {
  let listCopy = [...list];
  // do something with listCopy
  setList(listCopy);
}

此外，您似乎根本没有向函数发送数据，通过函数调用发送数据的方法是使用组件中的匿名函数进行处理：

<Component onSubmit={(e) => { onFormSubmitHandler(e.target.value) }} />

,

您应该尝试这样的事情

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={(e) => onFormSubmitHandler(e.target.value)}/>
            <List component="nav">
                {list.map((data,index) =>
                     <ListTile index={index} body={data}/>
                )}
            </List>
        </div>
    );
}

export default App