[英]React Hooks only update state on form submit
So I've been at this all morning and can't figure out how to update my state correctly using useState
.所以我整个上午都在这样做,但无法弄清楚如何使用
useState
正确更新我的状态。
I have a single controlled user input with name
.我有一个
name
的单个受控用户输入。 When a user enters text and submits I would like to take the input value and push that to another state object namesList
and map over that array in a child component.当用户输入文本并提交时,我想获取输入值并将其推送到另一个状态对象
namesList
并映射到子组件中的该数组。
Parent Component父组件
import React, { Fragment, useState } from 'react';
import TextField from '@material-ui/core/TextField';
import NameInputList from './NameInputList';
const NameInputContainer = () => {
const [name, setName] = useState('');
const [namesList, setNamesList] = useState([]);
const handleChange = event => {
const { value } = event.target;
setName(value);
};
const handleSubmit = event => {
event.preventDefault();
setNamesList(prevState => [...prevState, name]);
setName('');
};
return (
<Fragment>
<form onSubmit={handleSubmit}>
<TextField
id="name"
label="Enter New Name"
variant="outlined"
value={name}
onChange={handleChange}
/>
</form>
{namesList.length > 0 && <NameInputList names={namesList} />}
</Fragment>
);
};
export default NameInputContainer;
Child Component子组件
import React from 'react';
import PropTypes from 'prop-types';
const NameInputList = ({ names }) => {
console.log('child component names: ', names);
const generateKey = val => {
return `${val}_${new Date().getTime()}`;
};
return (
<ul>
{names.map((name, index) => ( // <--- Adding the index here seems to resolve the problem. I want to say the error was happening based on issues with having Unique keys.
<li key={generateKey(name + index)}>{name}</li>
))}
</ul>
);
};
NameInputList.propTypes = {
names: PropTypes.arrayOf(PropTypes.string)
};
NameInputList.defaultProps = {
names: []
};
export default NameInputList;
Seems like when I submit the first time the child component gets the correct value and renders as expected.似乎当我第一次提交时,子组件获得了正确的值并按预期呈现。 When I go to input a new name there's a rerender on every
handleChange
.当我输入一个新名称时,每个
handleChange
都会handleChange
渲染。 I'm not sure how to consistently: enter text > submit input > update namesList
> render updated namesList
in child component without handleChange
breaking the functionality.我不确定如何始终如一:输入文本 > 提交输入 > 更新
namesList
列表 > 在子组件中呈现更新的namesList
,而handleChange
破坏功能。
Just adding to that, as namesList
prop is an array, a new copy will be sent for each parent re-render.再加上,由于
namesList
道具是一个数组,将为每个父级重新渲染发送一个新副本。 Hence it's comparison will always be false and React will trigger a re-render of the child.因此,它的比较总是错误的,React 将触发孩子的重新渲染。
You can prevent the re-render by doing this :您可以通过执行以下操作来防止重新渲染:
export default React.memo(NameInputList, function(prevProps, nextProps) {
return prevProps.names.join("") === nextProps.names.join("");
});
This will ensure that NameInputList
only re-renders when the contents of namesList
actually change.这将确保
NameInputList
仅在namesList
的内容实际更改时重新呈现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.