Question

我正在尝试在componentDidMount中的react中编写一个for循环。它使用单词reviewArray的数组，并应返回每个唯一单词的对象以及每个单词使用了多少次。但是，它似乎根本没有循环，这些块内部的逻辑可以在外部工作，但是当放入循环中时，它什么也没做。

for (let i = 0; i < this.state.reviewsArray.length; i++) {
  let word = this.state.reviewsArray[i];
  if (!this.state.counts.hasOwnProperty(word)) {
    this.setState(prevState => {
      let counts = {...prevState.counts};
      counts.word = 1;
      return { counts };
    })
  } else {

    this.setState(prevState => {
      let counts = {...prevState.counts};
      counts.word += 1;
      return { counts };
    })
  }
}

counts返回状态为定义的空对象。

Answer 1

您可以执行以下操作：

代码中的主要问题是，您在循环中多次执行setState，这将导致重新渲染组件，而是创建一个新对象，并仅在操作结束时更新状态。

代码中的另一个问题是此行counts.word，因为您正在动态创建属性，所以counts.words不是当前数组索引中的单词，它仅在word上设置一个值道具。

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      reviewsArray: ["one", "two", "one"],
      counts: {}
    };
  }
  componentDidMount() {
    let newState = Object.assign({}, this.state);

    for (let i = 0; i < newState.reviewsArray.length; i++) {
      let word = newState.reviewsArray[i];
      if (!newState.counts.hasOwnProperty(word)) {
        newState.counts[word] = 1;
      } else {
        newState.counts[word] += 1;
      }
    }

    this.setState(newState);
  }

  render() {
    console.log(this.state);
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

Answer 2

我将使用一个样本数组来演示我所拥有的解决方案。我想这就是您想要的。

let counts = {}; // initialise the object
const reviewArray = ["hey", "heyo", "hi", "wow", "cat", "dog", "mouse", "dog",
 "lion", "cat", "dog", "dog", "hey"]; // Suppose this is the reviewArray

reviewArray.map((item) => {
     if(counts.hasOwnProperty(item)){
      counts = {
        ...counts,
        [item]: counts[item] + 1, // Update the count if the key exists
      }
   } else {
      counts = {
        ...counts,
        [item]: 1        // Initialise if the key is encountered for the first time
      }
   }
})

this.setState({ counts }); //finally set the state with the updated object

如果您觉得我可能错过了一些东西，请更新。我认为应该可以。

For循环和更新器功能在React中不起作用

2 个答案: