在特定索引处更改 React 状态数组

Posted 2023-02-22

【中文标题】在特定索引处更改 React 状态数组

【英文标题】：Changing React State Array at Specific Index

【发布时间】：2018-03-21 00:10:05

【问题描述】：

正如标题所暗示的，我正在尝试定位我的state object 中的一个数组，但如果你尝试过，你会猜到。这并不像听起来那么简单。我在这里查看了几个问题（React: How do I update state.item[1] on setState? (with JSFiddle) 和 ReactJS - setState of Object key in Array），但都没有解决我的问题。

我需要定位noteData 数组中的特定索引，并根据用户在<TextArea /> 组件中键入的任何内容对其进行更新。不完全确定为什么，但我的 noteData 数组只是读取为带有空字符串 noteData = [''] 的数组。

如果您需要更深入的了解，可以转到https://stackblitz.com/edit/note-taking 并分叉页面并自行编辑。文件结构至少可以说是愚蠢的。我开始使用 redux 并在中途决定不使用它。

状态和函数TextArea

class NoteList extends Component 
  constructor(props) 
    super(props);
    this.state = 
      inputValue: '',
      noteName: [],
      noteData: [],
      selectedNote: []
    


  handleInputValue(e) 
    this.setState(
      inputValue: e.target.value
    );
  

  addNoteFunc(e) 
    this.setState(
      noteName: [ ...this.state.noteName, e.target.value ],
      noteData: [ ...this.state.noteData, '' ]
    );
  

 // everytime the user types, change the value of noteData
  handleNoteData(e, index = this.state.selectedNote[0]) 
    const copyNoteData = Object.assign(, this.state);
    copyNoteData.noteData[index] = e.target.value;

    this.setState(copyNoteData);
  

  handleSelectedNote(index) 
    this.setState(
      selectedNote: [ index ]
    );
  

<textarea 
  value=this.state.noteData[this.state.selectedNote[0]]
  handleNoteData=(e, index) => this.handleNoteData(e, index)
/>

实际的 TextArea 组件

import React from 'react';

const TextArea = props => 
  return (
    <div className='textarea'>
      <textarea 
        value=props.value
        onKeyDown=props.handleNoteData
      />
    </div>
  );


export default TextArea;

【问题讨论】：

index 在此设置中将始终未定义。在这里你期待索引：handleNoteData=(e, index) => this.handleNoteData(e, index)，但是你没有在这里传递它onKeyDown=props.handleNoteData。所以index 最终总是一样的。这可能是原因。

而您的 handleSelectedNote 函数每次都会用新数组覆盖状态。所以this.state.selectedNote 的长度永远不会超过 1。

所以state.selectedNote 的长度应该始终为 1。顾名思义，当前选择的音符只能是一个。在我的handleNoteData func 中，我不确定我是否做得对，但index 参数被定义为this.state.selectedNote[0]...handleNoteData(e, index = this.state.selectedNote[0]) 所以我以后不需要传递一个值，因为它有已经定义了，还是我用错了？

那为什么是数组呢？您不能将index 保存为数字吗？

我猜可以，但我不确定读取的数字字符串是否可以在以后作为索引引用。

【参考方案1】：

你的代码有错误，因为 textarea 不是正确的组件，它应该是 TextArea 而不是 textarea 这是一个 html 元素，你首先必须先将它导入 notelist.js，这就是为什么 onKeyDown 道具是未设置。

<TextArea 
   value=this.state.noteData[this.state.selectedNote[0]]
   handleNoteData=(e, index) => this.handleNoteData(e, index = this.state.selectedNote[0])
/>

您还必须将 handleNoteData 添加到 onChange 事件中，否则 onKeyDown 事件中的 texarea 值将永远不会改变，因为您每次都将其重置为 e.target.value。

试试这个： https://stackblitz.com/edit/note-taking-y5hwsb?file=containers/notelist.js

【讨论】：

哇，这对我来说是一个非常糟糕的错字，感谢您发现它。那么你会如何建议而不是静态呈现“你好”，我可以引用 noteData 的索引并使用它的值呢？

copyNoteData.noteData[index] = 'Hello' 你将它设置为你好，你想要它是什么？