在javascript，reactjs中拆分字符串

Posted 2023-02-21

【中文标题】在javascript，reactjs中拆分字符串

【英文标题】：split string in javascript, reactjs

【发布时间】：2018-03-16 04:52:12

【问题描述】：

所以我正在开发一个测验应用程序，所以this 是我首次启动应用程序时的初始状态，我还有 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，那么我应该如何实现呢？非常感谢！

【问题讨论】：

你的问题还是不清楚update函数的实现在哪里？还有你使用 AnswerOption 组件的容器在哪里？

另外，如果您根据文档使用 react 16，则不应根据当前状态中继设置下一个状态，因为 setState 函数现在是异步的，并且可以在后台将多个 setState 修补在一起，在这里阅读：reactjs.org/docs/…

【参考方案1】：

您已拆分您的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 仅针对此答案存在，不针对其他任何内容。所以我们假设所有的值都相同。

【讨论】：

foreach 是有道理的，但它仍然给了我 answerCount 的新值，例如 Brown,D,JP: null，我在构造函数中的初始化状态是这样的 answersCount: Green: 0, Brown: 0, Blue : 0, 红: 0, A: 0, B: 0, C: 0, D: 0, EI: 0, SN: 0, TF: 0, JP: 0 ,

好的，所以对于第一部分我没有传递那个关键参数，现在我改变了关键参数来回答，当我使用 console.log(updatedAnswersCount) 它会给我我想要的Brown 更新 1 和 D 更新 1 等等，但是当我回到我的状态时，answersCount 只会将最后一个值 JP 更新 1，我不知道你是否知道我的意思