小编Mat*_*ody的帖子

我让地图在加载时工作，但每当我传递道具时，地图本身永远不会改变。

标记发生变化，但始终落后于它应有的状态，这显然是一个同步问题，但我不确定如何在我的组件中解决此问题。

class Map extends React.Component {
  state = {
     center: { lat: 50.937531, lng: 6.960278600000038 }
  }

  componentWillReceiveProps = () => {
    this.setState({
      center: { 
        lat: Number(parseFloat(this.props.city.lat)),
        lng: Number(parseFloat(this.props.city.lng))
      }
    });
  }

  render() {
    console.log(this.state.center)
    return (
      <div>
        <MapDetails
          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyB-L-IikkM6BZ_3Z2QIzbkx4pdAkP76tok&v=3.exp&libraries=geometry,drawing,places"
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={<div style={{ height: `100vh`}} />}
          mapElement={<div style={{ height: `100%` }} />}
          mapCenter={this.state.center}
        />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return { city: state.CityNameReducer }
}

export default connect(mapStateToProps)(Map);

const …

我正在使用谷歌图书API构建应用，并且似乎向列表中的每个孩子传递了唯一的键，但是错误不会消失。我一定做错了，但是我不确定。

const BookList = (props) => {

//map over all of the book items to create a new card for each one in 
the list
    const books = props.books.data.items.map((book) => { 
        console.log(book.id)
        return (
            <div className="col col-lg-4 grid-wrapper">
                <BookCard 
                    key={book.id}
                    image={book.volumeInfo.imageLinks.thumbnail}
                    title={book.volumeInfo.title} 
                    author={book.volumeInfo.authors[0]} 
                    description={book.volumeInfo.description}
                    previewLink={book.volumeInfo.previewLink}
                    buyLink={book.saleInfo.buyLink}
                />
            </div>
        ); 
    })

    return (
        <div>{books}</div>
    );
}

请注意，在返回const books之后，我有一个console.log（book.id），它将在控制台中显示所有10个唯一的id键。但是，当我尝试使用key = {book.id}将其传递给该组件的子组件时，出现此错误。

如何更改材质 UI 日期选择器图标？

我在代码或文档的 API 部分的任何地方都看不到它。

这是他们文档的链接：https : //material-ui.com/components/pickers/

import 'date-fns';
import React from 'react';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker,
} from '@material-ui/pickers';

export default function MaterialUIPickers() {
  // The first commit of Material-UI
  const [selectedDate, setSelectedDate] = React.useState(new Date('2014-08-18T21:11:54'));

  const handleDateChange = date => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justify="space-around">
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }} …

我正在尝试使 2 个侧边栏具有粘性，因此当您在那里滚动时，它们会一直跟随，直到用户到达页面底部。

这在其他程序中很容易实现，但在我现在正在编辑的应用程序中不起作用。

我已经阅读了可能导致此错误的所有内容，这是我迄今为止尝试解决的问题：更改浏览器（chrome 和 firefox）将 flexstart 添加到包含的粘性组件顶部：增值高度：自动删除从父容器和尝试表、块等进行伸缩。

奇怪的是固定的作品，但不粘。我总是可以创建一个函数来测试它是否处于该组件高度，然后在该高度添加固定。我宁愿不这样做，因为粘性是一个更简单的解决方案。

这是一个很大的项目，所以有很多代码，我不可能在这篇文章中全部放完，所以我只包含有问题的元素。

div.sticky {
  position: sticky;
  top: 0;
  justify-content: flex-start;
}

我设置了一个函数来查找字符串中是否存在 100，如果确实存在则将其删除。它将一直运行直到所有 100 个都被删除，然后如果数组现在为空则返回“yes”，如果数组不为空则返回“no”。

问题是它只返回“否”，即使我已经确认它是空的。

const hun = (input) => {
  const splitArr = input.split('');
  let empty = 'no';

  if (splitArr.length === 0) {
    console.log('it is equal to 0')
    empty = 'yes';
    return empty;
  };

  for (i = 0; i < splitArr.length; i++) {
    let num = splitArr[i] + splitArr[i + 1] + splitArr[i + 2];
    if (num === '100') {
      splitArr.splice(i, 3);
      hun(splitArr.join(''))
    }
  }
  return empty;
}

console.log(hun('101000'))
console.log(hun('1010001'))