Question

我有一些来自Parent的数据作为道具，我需要借助来自parent的数据创建一个选项，该选项是一组对象。下面是从父来作为道具数据

 `data={
      option1: "First "
      option2: "Second"
      option3: "Third"
      option4: "Fourth"
    }`

我需要创建的内容看起来像这样，但是在我的状态下

    `const OPTIONS = [{
         label: 'First',
         value: '1'
       }, {
         label: 'Second',
         value: '2'
        }, {
         label: 'Third',
         value: '3'
        },{
        label:'Fourth',
        value:'4'
       }];`

我有内部数组作为我的状态

   `this.state={
             options:[]
      }`

我们真正需要做的是用的setState从父数据来。在所有的答案，我看不出有任何的setState任何地方。

Answer 1

您可以使用map

您可以将First, Second and so on保留在数组中以在输出中获取value属性。

因此，这里的想法是遍历data对象的键，并检查indexOf键是否在values数组中，我们对其加1（因为数组的索引从0开始）如果没有，我们添加0

let data={ option1: "First",option2: "Second",option3: "Third",option4: "Fourth" }

let values = ['First','Second','Third', 'Fourth']

let op = Object.keys(data).map(e=>{
  let val = values.indexOf(data[e])
  return {
    label: e,
    value: val !==-1 ? val+1 : 0
  }
})

console.log(op)

Answer 2

您可以使用Object.entries

let data={ 
   option1: "First",
   option2: "Second",
   option3: "Third",
   option4: "Fourth" 
}

const options = Object.entries(data).map(arr=> ({
       label: arr[1],
       value: arr[0].replace( /^\D+/g, '')
   }))

console.log(options)

Answer 3

希望您的父组件的外表象下面这样：

def computeShippingCosts(weight: Double): Double =
  5 + 0.25*(weight - 30).max(0)

在Child中，您将以this.props.data的形式获取数据，使其处于状态的可能方法是class App extends Component { constructor() { super(); this.state = { data: { "option1": "First ", "option2": "Second", "option3": "Third", "option4": "Fourth" } }; } render() { return ( <div> <Child data={this.state.data} /> </div> ); } }，如果您需要执行一些副作用，则可以使用static getDerivedStateFromProps < / p>

下面是子组件：

componentDidUpdate

Demo Link

更新这与从父组件中的数据来阵列的状态

3 个答案: