Question

父组件使用setState从数据库中检索列表更新其状态。状态通过prop传递给其子组件。当父状态更新时，子组件中的数据列表仍为空列表。

父组件：

export default class Major extends Component {
        constructor(props) {
            super(props)
            this.state = {
                uni: []
            }
        }
        componentDidMount() {

            axios.get('http://localhost:3001/uni').then((res) => {
                this.setState({uni: res.data})
            }).catch((e) => {
                console.log('something wrong occured: ' + e)
            })
        }
        render(){
            return (
                <div>
                    <Datalsit_ list={this.state.uni} list_id='abc' />
                </div>

            )
        }
    }

子组件：

export default function Datalist({list_id, list}){
    return(
        <div>
            <input type="text" list={list_id} />
            <datalist id={list_id} >
            { list.map((each) => {
                <option value={each} />
            })}
            </datalist>
        </div>
    )
}

哪一部分出了问题？

Answer 1

您的代码中有错别字（在您的父数据列表中拼写为Datalsit_）...说了……这是您的父组件：

example.com

我不知道你为什么要通过export default class Major extends Component { state = { uni: [] }; componentDidMount() { axios .get('http://localhost:3001/uni') .then(res => { this.setState({ uni: res.data }); }) .catch(e => { console.log('something wrong occured: ' + e); }); } render() { return ( <div> <DataList list={this.state.uni} list_id="abc" /> </div> ); } }，但这不重要...

这是您的子级组件：

list_id prop as the string 'abc'

请注意export default function Datalist({ list_id, list }) { return ( <div> <input type="text" list={list_id} /> <datalist id={list_id}> {list.map((each, i) => { return <option key={i} value={each} />; })} </datalist> </div> ); }之前的return ...我假设该值可能是一个对象，因此在数据列表中您将看到<option />，它必须是[object, Object]（我不知道是什么，因为我看不到来自value={each.something}的API的数据结构）

再次，我不知道为什么要放一个http://localhost:3001/uni ...但是无论如何，这应该解决它...

通过父组件的setState更改道具时，子组件中的数据列表选项不会更新

1 个答案: