REACT.JS - 选择/选项没有显示它应该如何[重复]

Question

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

当我选择其他option 时，option 没有改变，但状态正在更新。

我有三个组件，一个基于类（OrcConfig）和两个函数组件（salvarOrcamento 和 orcSelect）。第一个拥有我的逻辑并控制状态，第二个从DB 获取一些数据并将其发送到第三个，其中select 标签和options 的列表由两个map 创建方法，第一个创建selects 的数量，第二个打印它们各自的select 中的选项列表。

到目前为止一切顺利，问题是当我更改option 时DOM 没有更新，但state 实际上只有在更新state 时才会发生，如果我删除了this.setState，问题就消失了，当然这不是解决方案，因为我需要更新state。除此之外，我只是看不到state 和select 之间的关系，因为component 甚至没有收到它的值，它只能访问该方法。

这里（或左边）缺少什么？

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

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>
    );
  }
}

SalvarOrcamento 组件：

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>
  )
}

OrcSelect 组件：

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>
    })
  )


};

这是 OrcSelect 接收映射的示例：

[[
   {nome: 'João'},
   {nome: 'Ricardo'},
   {nome: 'Alessandra'},
   {nome: 'Ana'}
]]

Answer 1

问题在于，当您更改状态时，您的 DOM 将被重新渲染。要解决此问题，您需要将 value 属性添加到 select 中，以分配当前所选选项的值。将新属性传递给您的组件