Javascript REACT.JS-Select/Option未按应有方式显示

这可能很简单，但我看不出我做错了什么

当我选择另一个选项时，

选项

不会改变，但状态正在更新

我有三个组件，一个基于类（OrcConfig）和两个函数组件（salvarorcconto和orcSelect）。第一个拥有我的逻辑并控制状态，第二个从

DB

获取一些数据并将其发送给第三个，其中

select

标记是，并且

选项列表是由两个
map
方法创建的，第一个选项创建了
选择数
，第二个选项打印了各自
选择
中的选项列表

到目前为止，问题是当我更改
选项时，
DOM
没有被更新，但是
状态
是，事实上只有当
状态
被更新时才会发生，如果我删除
这个。设置状态
问题就会消失，当然这不是一个解决方案，因为我需要更新
状态
。除此之外，我无法看到
状态
和
选择
之间的关系，因为
组件
甚至没有收到它的值，它只能访问该方法

这里少了什么（或留下了什么）

下面是我的应用程序的简化版本：

OrcConfig组件：

class OrcConfig extends Component {

state = {
    cliente: null

}

selecionarClienteHandler = e => {
    let clienteNome = this.state.cliente;
    clienteNome = e.currentTarget.value.split(',').filter(it => it !== '').join();
    this.setState({cliente: clienteNome});
    console.log(clienteNome)
}

render () {
    return (
        <div>
            <SalvarOrcamento 
                selecionarCliente={this.selecionarClienteHandler}
            />
        </div>
    );
  }
}

const salvarOrcamento = props => {

let [clientes, setClientes] = React.useState(null)

React.useEffect(() => {
    axios.get('/clientes.json')
        .then(res => {

            let clientesListaArr = Object.keys(res.data)
                                    .map(it => [['nome', it]])

            clientesListaArr.unshift([['nome', 'Clientes']])

            let clientesLista = clientesListaArr.map(it => Object.fromEntries(it))

            setClientes(clientes = clientesLista)
        })
        .catch(erro => console.log(erro))
}, [])

return (
    <div>
        <OrcSelect tipos={[clientes]} valorTipo={props.selecionarCliente} />
    </div>
  )
}

const orcSelect = props => {
console.log(props.tipos)
return (
    props.tipos.map( (tipo, i) => {
        return  <select 
                    key={Math.random()} 
                    onChange={props.valorTipo} 
                    name={tipo[0].nome}>

                    {
                        tipo.map((item, index) => 
                            <option 
                                value={[item.valor, item.altura, item.nome, item.furo]} 
                                key={Math.random()} >{item.nome}
                            </option>
                        )
                    }
                </select>
    })
  )


};

问题是，当您更改状态时，您的DOM将被重新提交。若要解决此问题，需要将“值”属性添加到“选择”中，以指定当前选定选项的值。将使用
Math.random（）
作为映射选项中的w键的新属性传递给组件。为什么？关键的一点是让React识别哪个JSX元素与哪个数组条目相匹配。通过在那里使用
Math.random（）
，每次渲染时每个元素的关键点都会改变，这意味着它就像根本没有关键点一样糟糕。键应该是一致标识元素的唯一值。此外，您没有用于选择列表的值。您仅为该选项设置一个值。当您更改选择列表上的值的状态时，组件将重新加载。抱歉，忘记发布链接。这是否回答了您的问题？它起作用了吗？你还想让我在答案里贴个例子吗？这很有道理。既然你回答了，我就试着这么做，但我就是不明白。我如何在不更新状态的情况下做到这一点？我还将该值作为道具传递给我的组件，但它似乎没有任何效果。很抱歉，如果这些都是愚蠢的问题，但我对您需要将e.currenttarget.value保存到状态而不对其进行修改的问题非常陌生。将此值（例如this.state.clienteval）传递给SalvarOrcamento componet，然后您需要道具或选择组件，最后在选择中，您需要使用从顶部传递的值添加value属性。传递的值必须与您分配给optionI的value属性的值相同。但最终问题是
键
。我使用了
Math.random
作为临时解决方案，React无法识别我的组件到底发生了什么。非常感谢。
[[
   {nome: 'João'},
   {nome: 'Ricardo'},
   {nome: 'Alessandra'},
   {nome: 'Ana'}
]]