Question

我处于这种状态

this.state = {
          isdone: '',
          items: [],
          currentItem: {text:'', key:''},
        }

我在currentItem中存储了唯一键，我需要遍历这些项以设置isdone值，所以我尝试这样

completeItem = key => {
    this.state.items.map(item => {
                if (this.state.currentItem.key === key) {
                    this.setState({isdone: 'is-done'})
                }
            })
}

但这不会更改isdone值，如何正确更改isdone值？

Answer 1

将isdone设置为特定的item而不是state.isdone。

const items = this.state.items;

items.map((item, index) => {
  if (this.state.currentItem.key === key && item.key === key) {
    this.setState({
      items: [
        ...items.slice(0, index),
        { ...item, isdone: 'is-done' },
        ...items.slice(index + 1, items.length)
      ]
    })
  }
})

Answer 2

您的状态结构似乎还不错。根据您提供的代码，听起来您正在尝试完成某种清单组件。在这种情况下，您不应使用单一的currentItem或isDone状态。

实际上，您真正想要的是为数组中的每个项目赋予自己的isDone属性。这样，您可以准确地切换每个项目的属性。类似于实际的清单。

尝试类似这样的操作：https://codesandbox.io/s/boring-galileo-yp7hj

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { key: 1, text: "walk dog", isDone: false },
        { key: 2, text: "clean fridge", isDone: false }
      ]
    };
  }

  handleComplete = key => {
    const itemsClone = [...this.state.items];
    const foundItem = itemsClone.find(item => item.key == key);
    foundItem.isDone = true;

    this.setState({
      items: itemsClone
    });
  };

  renderItems = () => {
    const { items } = this.state;

    return items.map(item => {
      return (
        <div>
          <span>{item.text}</span>{" "}
          {!item.isDone ? (
            <button onClick={() => this.handleComplete(item.key)}>
              Mark Complete
            </button>
          ) : (
            <span>Completed!</span>
          )}
        </div>
      );
    });
  };

  render() {
    return <div>{this.renderItems()}</div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在上面的代码中，您将发现我们在状态中仅跟踪一个属性，这就是项目列表。此外，每个项目都有自己的isDone属性以及键和文本值。

现在要实际将项目标记为完成，我引入了一个带有onClick处理函数的按钮。呈现列表中的每个项目以创建我们的标记后，每个项目将具有自己的按钮，并且我们使用handleComplete方法，该方法接受键作为参数。该函数将使用该键在我们的状态下查找相应的项目，并将其isDone属性切换为true。

如何访问特定的项目密钥

2 个答案: