母组件控制子组件的输入，但不会在更改时重新呈现

Question

I have a React component, where i have a category array, that i map, and index the data form another object.

  const labelComponents = categories.map((category, index) =>{
    const data = globalState.filter(systemLabel => systemLabel.value === category.categoryKey).pop()
    return(
      <Label
      key={data && data.text ? data.text + category : category + index}
      category={category} 
      data={globalState.filter(systemLabel => systemLabel.value === category.categoryKey).pop()}
      deleteLabel={deleteLabel}
      updateLabelValue={updateLabelValue}
      />
    )
  })

I pass in the function updateLabelValue where i try to update the specefic text attribute on the chosen object.

This function could probably be refactored, but it works for now.

 const updateLabelValue = (categoryKey, value) =>{
    const labelToUpdate = globalState.filter(entry => entry.value === categoryKey).pop();
    const index = globalState.indexOf(labelToUpdate);
    labelToUpdate.text = value;
    globalState[index] = labelToUpdate
    console.log(globalState)
    setGlobalState(globalState)
  }

I sat my key in euqal to the data.text attribute, so it would update automatically, but that does not happen

The issue here of course, is that i map my categories , but access my globalState object, so therefore it does not automatically update.

Answer 1

You are mutating React state (and React doesn't like this at all). That can trigger weird problems and make things doesn't re-render as expected.

• const labelToUpdate = globalState.filter(entry => entry.value === categoryKey).pop(); Pop is a mutable method although I don't know if it's a problem in this case, as filter is purely functional. Anyway you can use find instead of filter ( const labelToUpdate = globalState.find(entry => entry.value === categoryKey) ) if you only want one element or slice(-1)[0] after filter if there's several elements and you only want the last one ( const labelToUpdate = globalState.filter(entry => entry.value === categoryKey).slice(-1)[0] )

• The function updateLabelValue mutates globalState. In fact you have already changed the state in globalState[index] = labelToUpdate when you invoke setState.

To fix this you can pass the index of the element to the function and make something like this

 const updateLabelValue = (value, index) =>{
    const newState = globalState.map((item, i) => {
      if(index === i){ return value }
      else{ return item }
    }
    setGlobalState(newState)
  }