React Hooks仅在表单提交时更新状态

Question

所以我整个上午都在这里，无法弄清楚如何使用{ "Command": "type", "Target": "id=startDate", "Value": "${mydate}" } 正确更新我的状态。

我使用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>在子组件中呈现更新的namesList，而不会namesList破坏功能。

Answer 1

此外，由于namesList属性是一个数组，因此将为每个父级重新渲染发送一个新副本。因此，它的比较将始终为false，React将触发该子对象的重新渲染。

您可以通过以下操作防止重新渲染：

export default React.memo(NameInputList, function(prevProps, nextProps) {
  return prevProps.names.join("") === nextProps.names.join("");
});

这将确保NameInputList仅在namesList的内容实际更改时才重新渲染。