Reactjs 无法正确控制状态

我有3个组件：应用程序、地图和列表位置。在ListPlaces组件中，当用户在输入元素中键入某些内容时，我想更改App.js中的状态（标记的状态），以便在地图上仅显示相关标记

编辑：当我编辑打字错误时，错误消失了。然而，我认为逻辑仍然是错误的。因为当我在输入元素中写入内容时，标记数组将立即为0。当然，所有标记都消失了

更多解释：

componentDidMount之后，我的标记数组包含7项。“和贴图”组件使用此标记数组并在贴图上渲染标记。但是，我需要根据输入元素的值控制ListPlaces组件中的标记。所以我把它：

onChange={e=>{this.updateQuery（e.target.value）；changeMarkerHandler（e.target.value）}}

放在输入元素的onChange属性中。（省略this.updateQuery，现在，您只能关注ChangeMarkerHandler）

这个changeMarkersHandler在App.js中运行changeMarkers函数，但我不知道为什么我的标记数组在changeMarkers函数运行时会立即为0

注意：我使用的是react谷歌地图，我省略了一些与问题无关的代码块

App.js

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            places: [],
            markers: [],
            markerID: -1,
            newMarkers: []
        };
        this.changeMarkers = this.changeMarkers.bind(this);
    }

    componentDidMount() {
        fetch("api_url")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    places: data.response.venues,
                    markers: data.response.venues
                });
            })
            .catch(error => {
                console.log("Someting went wrong ", error);
            });
    }


    changeMarkers(value) {
        const newMarkers = this.state.markers.filter(
            place => place.name === value
        );
        this.setState({
            newMarkers : newMarkers,
            markers: newMarkers
        })
    }

    render() {
        return (
            <div className="App">
                <Map role="application"
                places={this.state.places}
                markers={this.state.markers}
                openInfoHandler={this.openInfo}
                closeInfoHandler={this.closeInfo}
                markerID={this.state.markerID}
                googleMapURL="url_here" />
                <ListPlaces changeMarkersHandler={this.changeMarkers} />
            </div>
        );
    }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
地点：[]，
标记：[]，
马克里德：-1，
新标记：[]
};
this.changeMarkers=this.changeMarkers.bind（this）；
}
componentDidMount（）{
获取（“api_url”）
.then（response=>response.json（））
。然后（数据=>{
这是我的国家({
地点：data.response.Victories、，
标记：data.response.viouses
});
})
.catch（错误=>{
log（“出错了”，错误）；
});
}
更改标记（值）{
const newMarkers=this.state.markers.filter(
place=>place.name==value
);
这是我的国家({
新标记：新标记，
标记：新标记
})
}
render（）{
返回(
);
}
}

ListPlaces.js

import React, { Component } from "react";
import escapeRegExp from "escape-string-regexp";

class ListPlaces extends Component {
    state = {
        searchQuery: ""
    };

    updateQuery = query => {
        this.setState({ searchQuery: query});
    };

    render() {
        const { toggleListHandler, locations, openInfoHandler, changeMarkersHandler} = this.props;
        let showLocations;
        if (this.state.searchQuery) {
            const match = new RegExp(escapeRegExp(this.state.searchQuery), "i");
            showLocations = locations.filter(location =>match.test(location.name));
        } else {
            showLocations = locations;
        }

        return (
            <div>
                <aside>
                    <h2>Restaurants</h2>
                    <nav>
                        <div className="search-area">
                            <input
                                className="search-input"
                                type="text"
                                placeholder="Search Restaurant"
                                value={this.state.searchQuery}
                                onChange={e => {this.updateQuery(e.target.value); changeMarkersHandler(e.target.value)}}
                            />
                        </div>
                        <ul>
                            {showLocations.map(location => {
                                return (
                                    <li
                                        key={location.id}
                                        onClick={e =>
                                            openInfoHandler(e, location.id)
                                        }
                                    >
                                        {location.name}
                                    </li>
                                );
                            })}
                        </ul>
                    </nav>
                    <p>some text</p>
                </aside>
                <a
                    onClick={toggleListHandler}
                    id="nav-toggle"
                    className="position"
                >
                    <span />
                </a>

            </div>
        );
    }
}

export default ListPlaces;

import React，{Component}来自“React”；
从“转义字符串regexp”导入转义表达式exp；
类ListPlaces扩展组件{
状态={
搜索查询：“
};
updateQuery=query=>{
this.setState（{searchQuery:query}）；
};
render（）{
const{toggleListHandler，locations，openInfoHandler，changeMarkerHandler}=this.props；
让展示地点；
if（this.state.searchQuery）{
const match=new RegExp（escapeRegExp（this.state.searchQuery），“i”）；
showLocations=locations.filter（location=>match.test（location.name））；
}否则{
showLocations=位置；
}
返回(
餐厅
{this.updateQuery（e.target.value）；changeMarkerHandler（e.target.value）}
/>

{showLocations.map（位置=>{
返回(

openInfoHandler（e，location.id）
}
>
{location.name}

);
})}

一些文本

);
}
}
导出默认列表位置；

您的构造函数中有一个输入错误

 this.changeMarkers(this.changeMarkers.bind(this));

应该是

 this.changeMarkers = this.changeMarkers.bind(this);

---

可能重复@RamanMishra我明确地检查了类似的问题并应用了不同的解决方案。无论如何，这个错误与打字错误有关。在我编辑了输入错误后，现在我有一个逻辑错误！在

ListPlaces.js

中，什么是

this.updateQuery（）

？@YonggooNoh this.updateQuery获取值并仅在列表元素中显示相关位置（不完全是关于在地图上显示标记）。基本上ListPlaces有自己的state和updateQuery方法。在

ListPlaces.js

中，您有一个函数调用和一个状态调用，其中没有设置初始状态，这不在提供的代码示例中。也许这就是错误？”this.updateQuery`和

this.state.searchQuery

我编辑了输入错误，但仍然有一个逻辑错误。我编辑了我的问题来解释我的逻辑错误@ztadic91