无法控制台记录更新的状态数组答案

【问题标题】：Could not console log the updated state array无法控制台记录更新的状态数组
【发布时间】：2020-04-17 19:07:31
【问题描述】：

我正在制作一个简单的应用程序，用户可以通过单击按钮创建一个新表单，所以为此，我有一个这样的数组状态：

const [numbers, setNumbers] = useState([0]);
const [count, setCount] = useState([0]);

在我的按钮 onClick 方法上我有这个，

setCount(count + 1);
setNumbers(numbers.concat(numbers[0] + count));

在我的渲染方法中，我有：

{numbers.map((number) => {
      return (
        <div key={number}>
          <InputCreator id={number} value={number} />
        </div>
      );
    })}

我的 InputCreator 组件是一个简单的回调组件，文本字段很少。

到目前为止，它运行良好。最近我想添加一个删除功能，用户可以在其中删除该特定表单。所以，我在这个表单和 onClick 方法中添加了一个按钮，我尝试控制台记录“数字”状态以检查一切是否正常，但它只记录我在创建状态时给出的默认值，而不是更新状态.可能是什么原因？所以我的想法是使用传递的道具从数组中删除该索引，以便组件将使用更新的表单数量重新渲染。有一个更好的方法吗？

编辑：这是我的 InputCreator 组件，

const InputCreator = useCallback((props) => {
const { id, value } = props;
// console.log(titles[id]);
return (
  <div>
    <Col xs={12} md={8}>
      <div className={styles.container}>
        <Form
          noValidate
          validated={false}
          onSubmit={handleSubmit}
          encType="multipart/form-data"
        >
          <Form.Group controlId="formGroupTitle">
            <Form.Label>Title</Form.Label>
            <Form.Control
              type="text"
              placeholder="Title"
              onChange={(e) => handleChange(e, value)}
              name="title"
              value={titles[id]}
            />
          </Form.Group>
          <Form.Group controlId="formGroupTitle">
            <Form.Label>Description</Form.Label>
            <Form.Control
              type="text"
              name="description"
              placeholder="Max limit 30"
              onChange={(e) => handleChange(e, value)}
              maxLength={31}
              value={descriptions[id]}
            />
          </Form.Group>
          <Button
          variant="outline-primary"
          size="sm"
          className={styles.deleteBtn}
          onClick={(e) => handleDelete(e, number)}
          >
          X
          </Button>
          </Form>
          )})

句柄删除：

const handleDelete = (e, value) => {
  e.preventDefault();
  console.log(numbers);
}

【问题讨论】：

能否在您的代码中添加控制台日志。所以可以很清楚，你试图在哪里记录状态
@ManishSundriyal 我已根据您的建议添加了代码，请检查。
在handleDelete 内部，你确定console.log(numbers); 吗？应该是console.log(value);吧？
numbers 是我想要访问的全局状态。我发现问题在于，我正在尝试从具有回调挂钩的函数访问状态，所以我无法访问它，有什么办法可以吗？
我不知道为什么你不能访问它。如果要从 numbers 数组中删除该索引，请查找并删除它。让我知道我是否遗漏了什么或用任何额外的细节更新问题。

标签： javascript reactjs

【解决方案1】：

我将指出我看到的错误，因为您的问题措辞不明确。

键没有传递到它们被传递到列表中，以便为具有唯一 ID 的每个元素创建一个列表。我不确定您在渲染方法中要做什么，但我建议您这样做：

const renderNumbers = () => myArray.map((number, index) =>
  <MyComponent key={index} number={number} />

删除一个元素。创建一个接受 ID 的函数。过滤它以显示没有该 ID 的新数组，下面是您可以应用的示例。

const deletePerson = (id) => {
    setNumbers(numbers.filter((number) => number.id !== id));
  };

将此句柄发送给删除元素的按钮

const handleDeleteNumber = () => {
    deleteNumber(number.id);
  };

制作一个可用于所有输入更改的 handleInputChange()。比如这个：

const handleInputChange = (event) => {
    setInfo({ ...info, [event.target.name]: event.target.value });
  };

在标签中你像这样分别传入 id 和 values

value={descriptions}
key={id}

【讨论】：