如何在react中拆分映射数组中的值

Question

需要在map Result对象中使用hypen拆分值

{ 
    first: "test-123",
    second: "second-6" 
    seconds: "bet-80"
    days: "4-7", 
}

期望的

<div>
    <div> 
        <label>first : </label>
        <label>test</label>
        <label>123</label>
    </div>
    <div>
        <label>second : </label>
        <label>second</label>
        <label>6</label>
    </div>
    <div>
        <label>seconds : </label> 
        <label>bet</label>
        <label>80</label>
    </div>
    <div>
        <label>days : </label> 
        <label>4</label>
        <label>7</label>
    </div> 
</div>

我的代码

<div>
{Object.keys(codes).map((key) => (
 
           <label>{key} : </label> 
         <label>codes[key]</label> 
         <label> </label> 
          ))}
          
    </div>

如何将假设从值中分离出来并显示在两个不同的标签中

test-123拆分下划线符号，并尝试显示如下

 <div> 
            <label>first : </label>
            <label>test</label>
            <label>123</label>
        </div>

Answer 1

这是你想要的吗？

         Object.keys(codes).map((key) => {
 
          let [a, b] = codes[key].split("-");
           return(
           <div key={codes[key]}>
             <label>{key} : </label> 
             <label>{a}</label> 
             <label>{b}</label> 
           </div>
          })}
          )
}

Answer 2

{
  Object.keys(codes).map((key) => (
    <div>
      <label>{key} : </label>
      {codes[key].split("-").map((val) => (
        <label>{val}</label>
      ))}
    </div>
  ));
}        

Answer 3

您可以尝试这样做，因为结果恰好是您通过codes[key].split('-')[0]在第一个破折号之前和通过codes[key].split('-')[1]在破折号之后want.You可以获得的字符串或值

state = {
   codes : {
    first: "test-123",
    second: "second-6" ,
    seconds: "bet-80",
    days: "4-7"
   }
  }
  render(){
    const {codes} = this.state
    let first,second
    const render =  Object.keys(codes).map((key) => [
    <>
    <label>{key} </label> 
    <label>{first = codes[key].split('-')[0]}</label> 
    <label>{second = codes[key].split('-')[1]}</label> 
    </>
    ])

  return (
    
  <>{render}</>
  );
}