Переназначение состояния из значения реквизита

Question

У меня есть компонент Select, после щелчка на опции значение передается в родительский компонент.

У родительского компонента есть начальное значение для отображения приложения, но я бы хотел, чтобы значение было изменяется после получения нового значения через реквизит.

Мой дочерний компонент имеет onChange, который получает реквизит и передает его родителю

const AxesChoice = ({ legendChoice, xChoice, updateAxis, updateLegend }) => {
  const [labels, updateLabels] = useState([])

  const { Option } = Select


  return (
    <div>
     <Select
        key="legendChoice"
        style={{ width: 250 }}
        value={legendChoice}
        onChange={event => {
          updateLegend(event)
        }}
      >
        {labels.map(items => (
          <Option key={items} value={items.header}>
            {items.label}
          </Option>
        ))}
      </Select>
    </div>
  )
}

В моем родительском компоненте отображается дочерний компонент как это

 <AxesChoice
        xChoice={axisChoice}
        legendChoice={legendChoice}
        updateAxis={updateAxisChoice}
        updateLegend={updateLegendChoice}
      />

Значения начального состояния устанавливаются следующим образом

  const [legendChoice, setLegendChoice] = useState('qualified')

Для обновления legendChoice у меня есть функция

const updateLegendChoice = event => {
    console.log('fired', event)
    // legendChoice = event
    console.log('legendCHoice', legendChoice)
    console.log('event', event)
    setLegendChoice({ legendChoice: event })
    console.log('newLegend', legendChoice)
    axios
      .get(`${BASE_URL}/${axisChoice}/${legendChoice}/${yearChoice}`)
      .then(res => setState(res.data.data))
      .catch(error => console.log(error))
    console.log('newState', state)
  }

В данный момент приложение вылетает парой предупреждений Uncaught Error: Objects are not valid as a React child (found: object with keys {legendChoice}). If you meant to render a collection of children, use an array instead.

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Я попытался обновить legendChoice, выполнив это

setLegendChoice(event)

Однако это выводы

legendCHoice qualified
event role
newLegend qualified

Как правильно обновить состояние, если значение задано реквизитом?

Answer 1

Разобрался

asyn c вызовы и обновления состояний не очень хорошо работают вместе, ловушка useEffect обращается к этой

моя функция теперь выглядит так

const updateLegendChoice = value => {
    setLegendChoice(value)
  }

Я переместил свой вызов API из функции и переместил его в хук useEffect

useEffect(() => {
    axios
      .get(`${BASE_URL}/${axisChoice}/${legendChoice}/${yearChoice}`)
      .then(res => setState(res.data.data))
      .catch(error => console.log(error))
  }, [legendChoice])

Мой вызов API теперь запускается каждый раз, когда происходит обновление состояния legendChoice.

Answer 2

Это должно быть:

setLegendChoice(event.target.value)

Когда вы используете функцию set, она принимает только значение, оно знает, что значение применяется к LegendChoice. Совершенно уверен, что вы по сути устанавливали legendChoice = {legendChoice: yourvalue}, поэтому, когда вы вызывали здесь legendChoice:

value={legendChoice}

Вы устанавливали значение равным объекту, а не строке.