Настройка кнопки твиттера возвращает значение [объект] вместо значения

Question

Я новичок в реакции, и мне было интересно, почему моя кнопка твиттера не работает должным образом.

Предполагаемое поведение: Нажатие кнопки должно скопируйте цитату в маску твиттера

Текущее поведение: Нажатие на кнопку приводит к появлению [object Object]--[object Object], которое появляется в твиттере.

Может кто-нибудь сказать мне, как это исправитьвопрос?Вот мой код:

class Quotes extends Component {
  constructor(props) {
    super(props);
    this.state = {
      quotes: [],
      rndNum: Math.floor(Math.random() * 500)
    };
    this.handleClick = this.handleClick.bind(this);
  }
  componentWillMount = () => {
    fetch("https://jsonplaceholder.typicode.com/comments")
      .then(res => res.json())
      .then(data => this.setState({ quotes: data }));
  };
  handleClick() {
    this.setState({ rndNum: Math.floor(Math.random() * 500) });
  }

  render() {
    // now, the console.log below returns the random object,
    // but if I add a ".body",
    // it returns undefined. Why does it return undefined?

    console.log(this.state.quotes[this.state.rndNum]);

    const postAuthor = this.state.quotes.map(quote => (
      <div key={quote.id}>
        <h3>{quote.email}</h3>
      </div>
    ));

    const postQuote = this.state.quotes.map(quote => (
      <div key={quote.id}>
        <h3>{quote.body}</h3>
      </div>
    ));

    let randomQuote = postQuote[this.state.rndNum];

    let randomAuthor = postAuthor[this.state.rndNum];

    return (
      <div id="Wrapper" style={outerDiv}>
        <div id="text">
          <h2>{randomQuote}</h2>
        </div>
        <div id="author">
          <h4>{randomAuthor}</h4>
        </div>
        <button id="new-quote" onClick={this.handleClick} style={button}>
          New Quote
        </button>
        <br />
        <br />
        <a
          className="twitter-share-button"
          id="tweet-quote"
          href={`https://twitter.com/intent/tweet?text=${randomQuote}--${randomAuthor}`}
        >
          Tweet this one!
        </a>
      </div>
    );
  }
}

Большое спасибо:)

Answer 1

спасибо за этот ответ.Неудачно Реагируйте на ответы

this.state.quotes[this.state.rndNum].body is undefined

В настоящее время я не могу понять, почему это так.Может ли быть причиной этого функция создания rndNum в состоянии?Я приму решение относительно другого решения:)

С наилучшими пожеланиями из Дуйсбурга.

Answer 2

Вместо передачи определенного randomQuote и randomAuthor.

<a className="twitter-share-button" id="tweet-quote" href={`https://twitter.com/intent/tweet?text=${randomQuote}--${randomAuthor}`}>Tweet this one!</a>

Попробуйте определить цитату и автора таким образом.Чтобы убедиться, что желаемое состояние и объект уже доступны, просто внесите небольшую проверку, прежде чем присваивать контент константе.

const selectedQuote = this.state.quotes[this.state.rndNum];
const quote = selectedQuote && selectedQuote.body;
const author = selectedQuote && selectedQuote.email;

И используйте его в своем возвращении, например:

<a className="twitter-share-button" id="tweet-quote" href={`https://twitter.com/intent/tweet?text=${quote}--${author}`}>Tweet this one!</a>

Зачем мне проверять, доступен ли this.state.quotes[this.state.rndNum] уже? Несмотря на то, что вы запускаете выборку данных в вашем componentWillMount (), не гарантируется, что состояние будет заполненоданные, когда он рендерит в первый раз.Вот почему вам нужно проверить, действительно ли данные доступны - в противном случае вы пытаетесь получить доступ к тому, чего просто нет, что приведет к ошибке, с которой вы столкнулись.

Еще один совет: пожалуйста, посмотрите наЖизненные циклы реагирующих компонентов: https://reactjs.org/docs/react-component.html componentWillMount() устарела и не должна использоваться с React 16. вкл.