在JavaScript和ReactJS中如何拆分字符串

Question

在JavaScript和ReactJS中如何拆分字符串

3

我正在开发一款类似于测验应用的程序，这是应用刚启动时的初始状态。我还有一个名为quizApplication.js的组件，用于存储所有问题和答案。

{
   question: "I am task oriented in order to achieve certain goals",
   answers: [
      {
        type: "Brown,D,JP",
        content: "Hell Ya!"
      },
      {
        type: " ",
        content: "Nah"
      }
    ]
 },

这是我的设置用户答案的函数：

setUserAnswer(answer) {
if (answer.trim()) {
  const answer_array = answer.split(',');
  const updatedAnswersCount = update(this.state.answersCount, {
    [answer]: {$apply: (currentValue) => currentValue + 1},
  });
  this.setState({
    answersCount: updatedAnswersCount,
    answer: answer
  }); 
 }
}

我也有一个AnswerOption组件，如下所示：

function AnswerOption(props) {
 return (
   <AnswerOptionLi>
    <Input
     checked={props.answerType === props.answer}
     id={props.answerType}
     value={props.answerType}
     disabled={props.answer}
     onChange={props.onAnswerSelected}
   />
    <Label className="radioCustomLabel" htmlFor={props.answerType}>
     {props.answerContent}
    </Label>
   </AnswerOptionLi>
  );
 }

我要做的是每当用户点击“HellYa!”时，就会将“Brown”、“D”和“JP”增加1，但是现在它给我一个新的answersCount值，即Brown、D、JP：null，那么我应该如何实现呢？非常感谢！

- Irfan

你的问题还不够清楚，更新函数的实现在哪里？另外，你在哪个容器中使用了AnswerOption组件？ - Fareed Alnamrouti

如果您正在使用React 16，则根据文档，您不应该依赖当前状态来设置下一个状态，因为setState函数现在是异步的，并且多个setState可以在幕后一起打补丁，详见：https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous - Fareed Alnamrouti

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Panther · Accepted Answer

你已经将type拆分，但还没有利用它们。

当你拆分了type后，你会得到一个长度为3的answer_array，其中包含["Brown", "D", "JP"]。

const answer_array = answer.split(',');

下一步，您将使用更新后的答案计数更新您的状态。您要执行以下操作：

const updatedAnswersCount = update(this.state.answersCount, {
 [answer]: {$apply: (currentValue) => currentValue + 1},
});

在这里，answer 包含 "Brown,D,JP"。由于您想要将每个值都加1，因此让我们循环遍历分割值并进行更新。

let updatedAnswersCount = null;

answer_array.forEach((key) => {
 updatedAnswersCount = update(this.state.answersCount, {
  [answer]: {$apply: (currentValue) => currentValue + 1},
 });
}

在这里，我假设您的类型是唯一的。意思是说，Brown/D/JP仅适用于此答案，而不适用于其他任何内容。因此，我们假设所有值都相同。