[英]React Hooks only update state on form submit
所以我整个上午都在这样做,但无法弄清楚如何使用useState
正确更新我的状态。
我有一个name
的单个受控用户输入。 当用户输入文本并提交时,我想获取输入值并将其推送到另一个状态对象namesList
并映射到子组件中的该数组。
父组件
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;
子组件
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;
似乎当我第一次提交时,子组件获得了正确的值并按预期呈现。 当我输入一个新名称时,每个handleChange
都会handleChange
渲染。 我不确定如何始终如一:输入文本 > 提交输入 > 更新namesList
列表 > 在子组件中呈现更新的namesList
,而handleChange
破坏功能。
再加上,由于namesList
道具是一个数组,将为每个父级重新渲染发送一个新副本。 因此,它的比较总是错误的,React 将触发孩子的重新渲染。
您可以通过执行以下操作来防止重新渲染:
export default React.memo(NameInputList, function(prevProps, nextProps) {
return prevProps.names.join("") === nextProps.names.join("");
});
这将确保NameInputList
仅在namesList
的内容实际更改时重新呈现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.