Axios和阵列修改

如何解决Axios和阵列修改

你好，我正在寻找一种方法来使坐标值在我的新对象数组中还原，因为我正在使用react-leaflet，并且将lat和long还原了。因此，我尝试创建一个具有完全相同值的新对象数组，只是对坐标数组进行修改。

class MapLayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      city: [],chosenTown: 'Toulouse',name: CITIES
    };
    this.handleChange = this.handleChange.bind(this)
  }
  componentDidMount(){
    const toulouse = `https://sportplaces.api.decathlon.com/api/v1/places?origin=1.444209,43.604652&radius=50`
    axios.get(toulouse)
      .then(res => res.data.data.features)
      .then(data => {
        const newData = data
        newData.map(newData =>{
          return {
          ...newData,coordinates:[1,2],proximity: 1
        }
        })
        console.log(newData)
        })
        .then(data => {this.setState({city: data})})
        }
componentDidUpdate(){
    console.log('test') 
  }
  handleChange(e){
    const newFilter = e.target.value
     this.setState({chosenTown:newFilter});
 }

  render() {
    const { city } = this.state;
    const {chosenTown} = this.state;
    const {name} = this.state;
    const {handleChange} = this.handleChange
    return (
      <>
      <FilterSelector option={name} handleChange={handleChange} />
      <Map center={[43.604652,1.444209]} zoom={12}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
       
        {city.filter((spot) => spot.properties.address_components.city === chosenTown)
        .map((geo) => (
          <Marker key={geo.properties.uuid} position={geo.geometry.coordinates} draggable="true">
            <Popup>
              <Preview geo={geo} />
            </Popup>
          </Marker>
        ))}
        
      </Map>
      </>
    );
  }
}

export default MapLayer;

解决方法

您需要存储“ Array.map”结果并返回。在您的代码中：

.then(data => {
  const newData = data
  newData.map(newData =>{
    return {
      ...newData,coordinates:[1,2],proximity: 1
    }
  })
  console.log(newData)
})

您的映射数据丢失，并且您没有返回任何内容，因此使用.then作为参数调用下一个undefined。

返回映射的变换，您应该会很好：

.then(data => {
  const newData = data.map(newData => {
    return {
      ...newData,proximity: 1
    }
  });
  console.log(newData);
  return newData;
})

记住：

• Array.map不会更改数组，而是创建一个新数组。
• 承诺中的每个.then使用先前从.then或.catch返回的值。