useState 不重新渲染组件

Question

我正在使用 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

Answer 1

您编辑的方式不对，您应该直接将新值赋给 setList 函数，而不是尝试更新列表变量。这就是为什么你有这个功能，这样你就不会更新原始值。您在这里要做的是使用函数中的先前状态和展开运算符，因为它是一个数组，您只想添加一个项目：

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

您应该将 list 变量视为一个 read-only 变量，不要试图修改它，您可以通过 setList 函数修改它。

如果您想做一些其他修改而不只是添加项目：

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

此外，您似乎根本没有向函数发送数据，通过函数调用发送数据的方式是在组件中使用匿名函数来完成：

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

Answer 2

记住你的状态不能用push修改，因为修改它的方法是用方法set

在方法中使用此代码onFormSubmitHandler

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

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

来打破它

Answer 3

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

Answer 4

你应该试试这样的东西

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

Answer 5

作为你的列表，在 js 中输入一个 reference 数组。如果您使用 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]));
    }

useState 不重新渲染组件

useState not re-rendring the componenet

javascript

reactjs

react-hooks

use-state